趣码乐园 Apache ECharts 6.0 功能介绍

简介: 作为一种布局,它还允许开发者将各种图表类型和组件结合,创造出灵活复杂的可视化作品:

1. 全新默认主题

在 ECharts 6.0 的开发过程中,我们深入分析了用户的真实使用场景,发现超过七成的开发者直接采用默认主题。这让我们意识到:一个优秀的默认主题不仅要具备美学价值,更要符合各个业务场景的通用需求。

新版主题系统内部使用了设计令牌(design token)对颜色、距离等设计元素进行重构,使得不同图表类型和组件之间更和谐一致

虽然 6.0 的主题在 5.x 版本上有非常大的调整,但是我们提供了一个 v5.js 主题文件,对于希望使用新版本功能但保留原有样式的开发者,可以实现快速迁移。

2. 动态主题切换

在之前的版本中,如果想要改变一个图表的主题,就必须注销图表实例后重新初始化,二次的初始动画可能对用户体验带来负面影响。在新版本中,我们实现了主题的动态切换能力,显著地提升用户体验。

3. 深色模式响应

在实现主题的动态注册和切换之后,一个典型场景是监听系统是否使用深色模式,并动态调整图表的深色与浅色主题

这对于支持深色模式的业务场景至关重要,可以确保应用界面与系统主题风格一致,显著提升用户体验的流畅性和专业性。

4. 新增和弦图

和弦图直观展现复杂关系网络中的流量与权重,特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持使用出节点和入节点的渐变色作为边的颜色,呈现独特的视觉美感

5. 新增蜂群图

传统的散点图在类目轴下如果数据过于密集,蜂群图(Beeswarm)通过将数据在非数值维度上的偏移,在保持数值轴准确性的前提下,实现散点图的无重叠分布

6. 新增抖动散点图

抖动散点图(Scatter Jittering)采用随机扰动策略,在非数据维度上添加固定范围的随机偏移,解决数据过于密集的问题

从下图我们可以看到,在未使用抖动的情况下,如果数据过于密集,很难看清数据的分布情况。

而在开启了数据抖动之后,可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且,相比蜂群图,抖动散点图具有更高的处理性能。

7. 新增断轴

断轴(Broken Axis)是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中,我们创新性地实现了模拟撕纸效果的断轴,使得断轴的含义能被更直观地传递,并且支持点击展开的效果,还原到真实数据比例。

8. 升级股市交易类图表

ECharts 6.0 针对金融交易场景深度优化,增强了标签针对坐标系的相对定位能力,助力开发者快速构建专业级行情分析工具。

下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景,结合了分时图、MACD、成交量、买卖盘口、深度图

这些实例可以帮助开发者快速实现金融交易场景的需求。

9. 新增矩阵坐标系

<h1><p id="14i.0086th.com">0</p></h1> <h1><p id="nq5.zgyjcjy.org.cn">6</p></h1> <h1><p id="1sw.easypao.com">1</p></h1> <h1><p id="d2i.dsacxz57.org.cn">0</p></h1> <h1><p id="nq5.kdk8n3.org.cn">5</p></h1> <h1><p id="hg7.baidvb.org.cn">8</p></h1> <h1><p id="5i9.jingkai.org.cn">6</p></h1> <h1><p id="6i5.zhaoyu.mobi">9</p></h1> <h1><p id="sdr.dreamyu.org.cn">5</p></h1> <h1><p id="pjy.artai.org.cn">6</p></h1>  

上述例子也用到了 ECharts 6.0 新增的矩阵坐标系,它的功能十分强大。不仅可以用来做协方差矩阵图:

元素周期表:

作为一种布局,它还允许开发者将各种图表类型和组件结合,创造出灵活复杂的可视化作品:


相关文章
|
6月前
|
机器学习/深度学习 人工智能 供应链
从概念到商业价值:AI、机器学习与深度学习全景指南
在这个科技飞速发展的时代🚀,人工智能正以惊人的速度渗透到我们的生活和工作中👀。但面对铺天盖地的AI术语和概念,很多人感到困惑不已😣。"AI"、"机器学习"、"深度学习"和"神经网络"到底有什么区别?它们如何相互关联?如何利用这些技术提升工作效率和创造价值?
|
4月前
|
存储 分布式计算 Hadoop
Hadoop框架解析:大数据处理的核心技术
组件是对数据和方法的封装,从用户角度看是实现特定功能的独立黑盒子,能够有效完成任务。组件,也常被称作封装体,是对数据和方法的简洁封装形式。从用户的角度来看,它就像是一个实现了特定功能的黑盒子,具备输入和输出接口,能够独立完成某些任务。
|
4月前
|
Dubbo 数据可视化 Java
整合SpringBoot、Dubbo与Nacos:一个快速入门教程
经过上述步骤,消费者模块成功引用了生产者提供的服务,并通过Spring Web将服务映射到了特定的URL路径上。消费者模块成功地调用并展示了生产者提供的数据,并在不移除特定依赖项的情况下确保了系统的正常运行。
|
4月前
|
SQL Java 应用服务中间件
数据库连接池详解及性能优化趋势
Sharding-JDBC所构建的Database Mesh与Service Mesh相互独立,协同工作。服务间的交互由Service Mesh Sidecar负责管理,而基于SQL的数据库访问则交由Sharding-JDBC-Sidecar处理。业务应用无需关心物理部署细节,实现真正的零侵入。Sharding-JDBC-Sidecar与宿主机生命周期绑定,非静态IP,确保了动态和弹性。尽管如此,数据运维操作仍可通过启动Sharding-JDBC-Server进程作为静态IP入口,借助命令行或UI客户端轻松完成。
|
4月前
|
缓存 API Apache
OkHttp:协议流程、优势及核心使用指南
关于OkHttp的介绍就告一段落了。在掌握了这些核心概念和关键类之后,你便能够自如地运用OkHttp来处理各种网络请求。
|
4月前
|
Java 测试技术 API
自动化测试框架深度解析与选择指南
Apache JMeter是Apache组织基于Java开发的一款压力测试工具,旨在测试软件的性能承受能力。它支持多种协议测试及功能测试,提供灵活的断言创建能力,如同创建带断言的脚本来验证程序是否返回预期结果。
|
4月前
|
消息中间件 存储 监控
Apache Kafka 3.0与KRaft模式的革新解读
在该架构中,Kafka集群依旧包含多个broker节点,但已不再依赖ZooKeeper集群。被选中的Kafka集群Controller将从KRaft Quorum中加载其状态,并在必要时通知其他Broker节点关于元数据的变更。这种设计支持更多分区与快速Controller切换,并有效避免了因数据不一致导致的问题。
|
12月前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
1724 0
Vue集成Excalidraw实现在线画板功能
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
1390 1
使echarts图例legend只选中一个(selectedMode)