ECharts 5 中的新特性

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

Apache ECharts 一直致力于让开发人员更容易地创建灵活且丰富的可视化效果。在最新发布的 Apache ECharts 5 中，我们专注于增强图表的叙事性，使开发人员能够以更简单的方式讲述数据背后的故事。

“Apache ECharts 5 的核心是“展示，而不是讲述”，它是围绕可视化叙事的五个主题和 15 个功能的全面升级，使图表能够更好地讲述数据背后的故事。它可以帮助开发人员更轻松地创建满足各种场景需求的可视化效果。

叙事性

动画对人类认知的重要性不言而喻。在我们之前的工作中，我们使用初始化动画和过渡动画来帮助用户理解数据转换之间的联系，使图表的出现和转换看起来不那么生硬。这一次，我们进一步增强了我们的动画功能，效果更加显著。我们希望进一步利用动画的作用来帮助用户的认知，并帮助他们更容易地通过图表的动态叙事功能来理解图表背后的故事。

柱状图/折线图赛跑

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

动态排序图表显示了不同类别在排名中随时间的推移的演变。开发人员可以在 ECharts 中使用一些简单的配置代码启用此效果。

自定义系列动画

除了动态排序图表外，Apache ECharts 5 还在自定义系列中提供了更丰富、更强大的动画，支持标签值文本的插值动画、图形的变形、组合、分离和其他效果的过渡动画。

想象一下，您可以使用这些动态效果创建出多么惊人的可视化效果！

视觉设计

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

整体设计

我们发现，很大一部分开发人员使用 ECharts 的默认主题样式，因此拥有一个优雅的默认主题设计非常重要。在 Apache ECharts 5 中，我们重新设计了默认主题样式，并针对不同的图表和组件进行了优化。例如，我们考虑了颜色之间的差异、与背景颜色的对比以及与相邻颜色的协调等因素，并确保色盲人士可以清楚地区分数据。

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

对于折线图，有一个直观的样式变化，即默认情况下隐藏了 y 轴（value 轴）的轴线和轴刻度。请看下图，左侧是 v4 中折线图的默认样式，右侧是 v5 中的新样式。事实上，我们仅通过分割线就可以算出值，因此我们希望隐藏不必要的元素，以更清晰的方式传递图表信息。

对于数据区域缩放、时间线和其他交互组件，我们还设计了一种新的样式并提供了更好的交互体验

时间轴

Apache ECharts 5 带来了适用于表达时间戳刻度的时间轴。时间轴的默认设计更突出重要信息，并提供更灵活的自定义功能，允许开发人员根据不同的需求自定义时间轴的标签内容。

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

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

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

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

仪表盘

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

不同样式的仪表盘指针。

这些升级不仅允许开发人员使用更简单的配置项来实现很酷的效果，还带来了更丰富的自定义功能。

圆角

Apache ECharts 5 支持饼图、旭日图和树状图的圆角。不要低估圆角配置的简单性，但将它们与其他效果结合使用可以创建更个性化的可视化效果。

交互性

可视化的交互性有助于用户探索工作并加深对图表主要思想的理解。

多状态

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

这次在 Apache ECharts 5 中，我们在原始鼠标悬停突出显示的基础上添加了模糊其他不相关元素的新效果，以便可以关注目标数据。

例如，在此柱状图示例中，当鼠标悬停在系列上时，其他不相关的系列将淡出，从而更清晰地突出显示焦点系列中数据的比较。在具有更复杂数据结构（如关系图、树图、旭日图、桑基图等）的图表上，也可以通过淡出不相关的元素来查看数据之间的联系。此外，现在可以在 blur 中设置可在 emphasis 中设置的颜色、阴影和其他样式。

此外，我们为所有系列添加了点击选择，该交互以前仅在少数系列（如饼图和地图）中可用，允许开发人员将其设置为单选或多选模式，并侦听 selectchanged 事件以获取所有选定的形状以进行进一步处理。与 emphasis 和 blur 一样，也可以在 select 中配置选择样式。

性能改进

脏矩形渲染

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

脏矩形的视觉演示，红色框区域为该帧重绘的部分。

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

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

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

Apache ECharts 5 在这些场景中对 CPU 消耗、内存使用和初始化时间进行了深度优化，使得百万级数据的实时更新（每次更新少于 30 毫秒）成为可能，甚至可以在 1 秒内渲染千万级数据，并且内存占用低，工具提示交互流畅。

开发体验

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

数据集

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 版本中与大家再次相见！

贡献者在 GitHub 上编辑此页面

pissang

plainheart

timonla