Apache ECharts 6 新特性

12 年前，ECharts 在 GitHub 首次发布，一颗开源的种子从此萌发。

从最初的图表工具，到如今成长为支撑百万级开发者的可视化巨擘；从单一的前端图表库，演进为支持移动端、大屏、服务端渲染等全场景的技术体系。这 12 年间，我们见证了 ECharts 在技术方面的持续突破，更欣喜地看到全球开发者用 ECharts 创造出无数惊艳的数据故事。

现在，Apache ECharts 6.0 正式发布，我们呈上诚意满满的 12 项升级，只为百尺竿头，更进一步。

功能概览

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

新版主题系统内部使用了设计令牌（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. 新增蜂群图

传统的散点图在类目轴下如果数据过于密集，蜂群图（Beeswarm）通过将数据在非数值维度上的偏移，在保持数值轴准确性的前提下，实现散点图的无重叠分布。将 jitter 设置为非 0 值，将 jitterOverlap 设置为 false 来实现蜂群图。

6. 新增抖动散点图

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

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

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

将 jitter 设置为非 0 值，将 jitterOverlap 设置为 true 来实现抖动散点图。

7. 新增断轴

断轴（Broken Axis）是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 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 或发布到自己的仓库，实现自定义系列的复用