ECharts 5 新特性

在过去的几年里，数据可视化已经取得了长足的进步。开发者不再期望可视化产品只是简单的图表创建工具，而是在交互、性能、数据处理等方面有了更高级的需求。

Apache ECharts 一直致力于让开发者更轻松地创建灵活、丰富的可视化作品。在最新发布的 Apache ECharts 5 中，我们着重增强了图表的叙事能力，让开发者能够以更简单的方式讲述数据背后的故事。

Apache ECharts 5 的核心是“Show, do not tell”，围绕可视化的叙事能力，对五个模块、十五项特性进行了全面升级，让图表更好地讲述数据背后的故事。它帮助开发者更轻松地创建满足各种场景需求的可视化作品。

叙事性

动画对于人类认知的重要性不言而喻。在我们以往的工作中，我们使用初始化动画和过渡动画来帮助用户理解数据变换之间的联系，使得图表的出现和变换不那么僵硬。这次，我们更是大幅增强了我们的动画能力。我们希望能够进一步发挥动画在帮助用户认知方面的作用，借助图表的动态叙事功能，帮助他们更轻松地理解图表背后的故事。

动态排序图

Apache ECharts 5 新增了对动态排序柱状图和动态排序折线图的支持，以帮助开发者轻松创建显示数据随时间变化的时间序列图表，并讲述数据的演变过程。

动态排序图展示了不同类别在排名中随时间的变化。开发者只需几行简单的配置代码，就可以在 ECharts 中启用这种效果。

自定义系列动画

除了动态排序图，Apache ECharts 5 在自定义系列中提供了更丰富、更强大的动画，支持标签数值文本的插值动画，以及图形元素的变形（morph）、合并（combine）、分离（separate）等效果的过渡动画。

想象一下，利用这些动态效果，你能创造出多么惊艳的可视化作品！

视觉设计

视觉设计的作用不仅仅是让图表更好看，更重要的是，符合可视化原则的设计可以帮助用户更快地理解图表想要表达的内容，并尽可能消除因不良设计可能带来的误解。

整体设计

我们发现，很大一部分开发者使用的是 ECharts 的默认主题样式，因此，拥有一套优雅的默认主题设计至关重要。在 Apache ECharts 5 中，我们重新设计了默认主题样式，针对不同的图表和组件进行了优化。例如，我们考虑了颜色之间的区分度、与背景色的对比度、与相邻颜色的和谐度等因素，并确保色盲人士也能清晰地分辨数据。

让我们以最常用的柱状图为例，看看新版的浅色和深色主题样式。

对于折线图，一个直观的样式变化是 y 轴（数值轴）的轴线和刻度线默认被隐藏了。看下图，左边是 `v4` 版本中折线图的默认样式，右边是 `v5` 的新样式。实际上，我们仅通过分割线就已能大致了解数值，因此我们希望能隐藏不必要的元素，以更清晰的方式传递图表信息。

对于数据区域缩放、时间轴等交互组件，我们也设计了新的样式，并提供了更好的交互体验。

时间轴

Apache ECharts 5 带来了一个适合表达时间戳刻度的时间轴。时间轴的默认设计更突出地显示了重要信息，并提供了更灵活的定制能力，让开发者可以根据不同需求定制时间轴的标签内容。

首先，时间轴不再像以前那样绝对均匀地分割，而是会选择更有意义的点，如年、月、日和整点来显示，并且可以同时显示不同层级的刻度。标签的 `formatter` 支持时间模板（例如 `{yyyy}-{MM}-{dd}`），并且可以为不同时间粒度的标签指定不同的 `formatter`，这可以与富文本标签结合，创造出引人注目且多样的时序效果。

在不同 dataZoom 粒度下时间刻度的显示。

Tooltip 是最常用的可视化组件之一，帮助用户交互式地了解数据细节。在 Apache ECharts 5 中，我们优化了 tooltip 的样式，通过调整字体样式、颜色、指向图形的箭头、边框颜色跟随图形颜色等特性，使 tooltip 的默认显示更加优雅和清晰。改进了富文本的渲染逻辑，确保其显示方式与 HTML 保持一致，让用户可以在不同场景下选择不同的技术方案来实现相同的效果。

除此之外，这次我们还增加了在提示框中按数值大小或类目顺序对列表进行排序的功能。

仪表盘

我们看到社区用户创建了很多炫酷的仪表盘图，但它们的配置方式通常复杂且取巧。因此，我们升级了仪表盘，支持使用图片或矢量路径绘制指针、锚点配置、进度条、圆角效果等。

不同样式的仪表盘指针。

这些升级不仅让开发者能够用更简单的配置项实现酷炫的效果，也带来了更丰富的定制能力。

圆角

Apache ECharts 5 支持为饼图、旭日图和矩形树图设置圆角。不要小看这简单的圆角配置，将它们与其他效果结合，可以创造出更具个性的可视化作品。

交互性

可视化的交互性帮助用户探索作品并加深对图表主旨的理解。

多状态

在 ECharts 4 中，有两种交互状态：`emphasis` 和 `normal`。当鼠标悬停时，图形会进入 `emphasis` 状态以区分数据。

这次在 Apache ECharts 5 中，我们在原有的鼠标悬停高亮的基础上，新增了**模糊**其他不相关元素的效果，从而使目标数据得以聚焦。

例如，在这个条形图示例中，当鼠标悬停在一个系列上时，其他不相关的系列会淡出，从而更清晰地突出所聚焦系列的数据对比。在关系图、树图、旭日图、桑基图等数据结构更复杂的图表上，也可以通过淡出不相关元素来观察数据之间的联系。此外，可以在 `emphasis` 中设置的颜色、阴影等样式，现在也可以在 `blur` 中设置。

此外，我们为所有系列添加了**点击选中**功能，这是一种以前只在少数系列如图饼图和地图中可用的交互方式，允许开发者将其设置为单选或多选模式，并监听 `selectchanged` 事件以获取所有选中的图形进行进一步处理。与 `emphasis` 和 `blur` 一样，选中样式也可以在 `select` 中配置。

性能提升

脏矩形渲染

Apache ECharts 5 新增了对脏矩形渲染的支持，以解决只有局部变化的大场景下的性能瓶颈。当使用 Canvas 渲染器时，脏矩形渲染技术会检测并只更新视图中发生变化的部分，而不是任何变化都导致整个画布的重绘。这有助于在某些特殊场景下提高渲染帧率，例如鼠标频繁触发大量图形高亮的场景。过去对于这类场景，通常使用额外的 Canvas 层来优化性能，但这种方法并不适用于所有场景，且对于复杂样式效果不佳。脏矩形渲染很好地兼顾了性能和显示正确性。

脏矩形的可视化演示，红色框区域为该帧重绘的区域。

你可以在新的示例页面上启用脏矩形优化来查看效果。

实时时序数据折线图性能优化

此外，大数据量折线图的性能也得到了显著提升。我们经常会遇到需要高性能绘制大量实时时序数据的需求，这些数据每隔几百或几十毫秒就会更新一次。

Apache ECharts 5 在这些场景下深度优化了 CPU 消耗、内存占用和初始化时间，实现了百万级数据的实时更新（每次更新小于 30ms），甚至千万级数据也能在 1s 内完成渲染，内存占用低，且 tooltip 交互流畅。

开发体验

我们希望如此强大的可视化工具能被更多开发者以更简单的方式使用，因此开发者体验对我们来说也是一个非常重要的方面。

数据集

ECharts 5 增强了数据集的数据转换能力，让开发者能以简单的方式实现筛选、排序、聚合、直方图、简单聚类、回归等常见的数据处理。开发者可以统一且声明式地使用这些功能，轻松实现常见的数据操作。

国际化

ECharts 原有的国际化实现方式是根据不同语言参数打包成不同的发行文件。这种方式下，动态语言和主代码绑定在一起，使用 ECharts 时切换语言的唯一方法是重新加载不同语言版本的 ECharts 发行版。

因此，从 Apache ECharts 5 开始，动态语言与主代码分离。要切换语言，只需加载对应的语言包，使用 `registerLocale` 函数像挂载主题一样挂载语言对象，然后重新初始化即可完成语言切换。

// import the lang object and set when init
echarts.registerLocale('DE', lang);
echarts.init(DomElement, null, {
  locale: 'DE'
});

TypeScript 重构

为了能更安全、更高效地持续重构和开发新功能，我们从使用 TypeScript 重写代码开始 Apache ECharts 5 的开发。TypeScript 带来的强类型让我们有信心在 ECharts 5 的开发过程中大刀阔斧地重构代码，以实现更激动人心的功能。

对于开发者来说，我们也可以直接从 TypeScript 代码生成更好、更符合代码的 `DTS` 类型定义文件。在此之前，ECharts 的类型定义文件一直由社区开发者维护并发布到 DefinitelyTyped，这是一项繁重的工作，感谢你们的贡献。

此外，如果开发者按需引入组件，我们提供了一个 `ComposeOption` 类型方法，可以组合出一个只包含所引入组件的配置项类型，这能带来更严格的类型检查，帮助你提前发现未引入的组件类型。

无障碍

Apache ECharts 一直非常重视无障碍设计，我们希望图表传达的信息能被平等地获取。我们也希望图表开发者能以极低的开发成本实现这一点，从而让开发者更愿意支持无障碍化。

在上一个大版本中，我们支持了根据不同图表类型和数据自动智能生成图表描述，让开发者可以非常容易地支持图表的 DOM 描述信息。在 ECharts 5 中，我们也做了更多的无障碍改进，以帮助视障人士更好地理解图表内容。

主题颜色

在设计新的默认主题时，我们考虑了无障碍性，我们反复测试了颜色的亮度和色值，以帮助无障碍用户清晰地识别图表数据。

此外，对于有进一步无障碍需求的开发者，我们还提供了专门的高对比度主题，用对比度更高的颜色来进一步区分数据。

贴花图案

ECharts 5 还提供了一个新的贴花功能，通过使用图案来辅助颜色表示，帮助用户进一步区分数据。

此外，贴花图案在其他一些场景下也很有帮助，例如：在只有单色或极少颜色的报纸、书籍等印刷品中帮助更好地区分数据；使用图形元素帮助用户更直观地理解数据。

总结

除了上述功能外，Apache ECharts 在大量细节上进行了改进，以帮助开发者更轻松地创建出默认效果好、配置灵活、能用图表讲述数据背后故事的作品。

感谢所有使用 ECharts，甚至参与社区贡献的开发者，是你们让 Apache ECharts 5 成为可能。我们将以更大的热情投入到未来的开发中，我们 6.0 再见！

贡献者在 GitHub 上编辑此页

pissang plainheart timonla