Apache ECharts 6 新特性

十二年前，ECharts 在 GitHub 上首次发布，播下了开源之旅的种子。

从一个简单的图表工具到支持数百万开发者的可视化利器；从单一的前端图表库到涵盖移动端、大屏和服务端渲染的全面技术体系——在这 12 年里，我们见证了 ECharts 的持续技术突破，并欣喜地看到全球开发者利用 ECharts 创作了无数令人惊叹的数据故事。

现在，Apache ECharts 6.0 正式发布，带来 12 项重大升级，将您的数据可视化提升到新的水平。

特性概览

十二载沉淀，只为更极致的视觉表达。Apache ECharts 的核心力量始终源自对开发者真实挑战的深度理解。在定义 6.0 的方向时，问题很明确：如何让复杂的数据呈现既强大又优雅？

这驱动我们围绕三个核心维度进行深度演进

更专业的视觉呈现：从精心设计的默认主题到智能暗黑模式切换，确保图表具备专业外观并无缝集成到现代应用中。
扩展数据表达的边界：新增图表类型和功能，以处理复杂场景并实现深层数据的直观表达。
释放组合的自由度：从革命性的矩阵坐标系到可复用的自定义系列，再到优化的坐标轴标签——赋能开发者自由组合，将创意转化为不受限的视觉作品。

我们在这三个核心维度上进行了 12 项升级。这不仅仅是简单的功能增加，而是构建下一代数据驱动应用的坚实基础。它们都指向一个目标：让 ECharts 在后台强大、可靠、稳定，将舞台和聚光灯留给您的创意表达。

下面，我们将详细介绍这十二项升级

更专业的视觉呈现
- 1. 全新默认主题：用于专业数据表达的现代设计语言
- 2. 动态主题切换：适用于多主题场景的无缝运行时主题切换
- 3. 暗黑模式支持：自动适配系统深色/浅色模式，提升用户体验
扩展数据表达的边界
- 4. 新增和弦图：可视化复杂的关系和分布
- 5. 新增蜂群图：智能地将重叠的数据点展开为蜂窝布局
- 6. 新增散点抖动：在散点图中加入抖动，提升密集数据的可读性
- 7. 新增截断轴：轻松呈现具有巨大数量级差异的数据
- 8. 增强的股票交易图表：提升了标签能力并提供更多开箱即用的交易图表
释放组合的自由度
- 9. 新增矩阵坐标系：像表格一样自由组合图表类型和组件
- 10. 增强的自定义系列：支持 npm 发布和动态注册，实现代码复用
- 11. 新增自定义图表：小提琴图、等高线图、阶段图、条形范围图和折线范围图
- 12. 坐标轴标签优化：更智能的默认轴标签布局，防止溢出和重叠

凭借这些升级，Apache ECharts 6.0 帮助用户更灵活、更方便地创建更多图表，真正实现“图表创作的无限可能”！

特性详情

1. 全新默认主题

在 ECharts 6.0 的开发过程中，我们分析了真实的用户场景，发现超过 70% 的开发者使用默认主题。这让我们意识到：一个优秀的默认主题不仅应该美观，还应该满足各种业务场景的通用需求。

新的主题系统使用设计变量 (design tokens) 重构了颜色、间距和其他设计元素，使不同的图表类型和组件更加和谐一致。

虽然 6.0 主题与 5.x 相比有重大变化，但我们为希望使用新功能但保留旧样式的开发者提供了 v5.js 主题文件，以便快速迁移。

2. 动态主题切换

在之前的版本中，更改图表主题需要销毁图表实例并重新初始化，这可能会因为重复动画而对用户体验产生负面影响。在新版本中，我们实现了动态主题切换（参见文档），显著提升了用户体验。

3. 暗黑模式支持

随着动态主题注册和切换的实现，一个典型的场景是监听系统的暗黑模式并动态调整图表的主题。

这对于支持暗黑模式的业务场景至关重要，确保应用界面与系统主题匹配，极大地增强了用户体验。

以下是如何监听系统暗黑模式并更改图表主题的方法

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function updateDarkMode() {
    const isDarkMode = darkModeMediaQuery.matches;
    for (const chart of charts) {
        chart.setTheme(isDarkMode ? 'dark' : 'default');
    }
}
darkModeMediaQuery.addEventListener('change', () => {
    updateDarkMode();
});

4. 新增和弦图

和弦图直观地展示了复杂关系网络中的流动和权重，非常适合金融交易和社交网络等场景。ECharts 创新地支持了边使用源节点和目标节点的渐变色，创造独特的视觉效果。参见 series-chord。

5. 新增蜂群图

传统的散点图在类目轴上可能会变得过度拥挤。蜂群图使用非数值轴偏移来分布点位而不会重叠，同时保持数值轴的准确性。将 jitter 设置为非零值并将 jitterOverlap 设置为 false 即可启用蜂群图。

6. 新增散点抖动

散点抖动在非数据维度上增加随机偏移，解决数据点过于密集的问题。

如果不使用抖动，当数据密集时很难看清分布

启用抖动后，最密集的范围（6-8）变得清晰。与蜂群图相比，散点抖动具有更好的性能。

将 jitter 设置为非零值并将 jitterOverlap 设置为 true 即可启用散点抖动。

7. 新增截断轴

截断轴是一种用于展示具有巨大数量级差异的数据的可视化技术。在 ECharts 6.0 中，我们创新地实现了截断轴的撕纸效果，使含义更加直观，并支持点击展开以还原真实的数据比例。

8. 增强的股票交易图表

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

下面是一个使用 ECharts 的综合股票交易图表，结合了分时图、MACD、成交量、盘口和深度图

这些示例可以帮助开发者快速满足金融交易需求。例如，通过 relativeTo 可以在图表的四个角落显示数值。

9. 新增矩阵坐标系

上面的例子也使用了 ECharts 6.0 中新的矩阵坐标系，它非常强大。它可以用于协方差矩阵图

元素周期表

作为一种布局方式，它还允许开发者组合各种图表类型和组件，创建灵活而复杂的视觉呈现

10. 增强的自定义系列

以前，使用 ECharts 自定义系列意味着开发者必须从头开始编写复杂的 renderItem 逻辑，代码复用仅限于复制粘贴。现在，ECharts 6.0 带来了标准化、可复用的解决方案

自定义系列注册：与主题注册类似，自定义系列可以动态注册，并像内置系列一样轻松使用。参见 series-custom.renderItem
官方自定义系列项目：官方项目位于 https://github.com/apache/echarts-custom-series，提供了多个自定义系列，正式发布后可通过 npm 获取
发布你自己的自定义系列：向上述项目提交 Pull Request 或发布到你自己的仓库以实现代码复用