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 token）重构了颜色、间距等设计元素，使不同图表类型和组件之间更加和谐统一。

尽管 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 使用
发布你自己的自定义系列：向上述项目提交拉取请求，或发布到自己的仓库，以实现代码复用