ECharts 5 中的新特性

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

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

"Apache ECharts 5 的核心是“只展示，不说明”，这是围绕可视化叙事进行的五大主题和 15 项功能的全面升级，使图表能更好地讲述数据背后的故事。它帮助开发者更轻松地创建满足各种场景需求的可视化。

叙事能力

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

动态排序柱状/折线图

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

动态排序图表展示了不同类别在排名中随时间的演变。开发者只需通过几行简单的配置代码即可在 ECharts 中启用此效果。

自定义系列动画

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

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

视觉设计

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

整体设计

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

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

对于折线图，有一个直观的样式变化是 y 轴（value 轴）的轴线和刻度默认被隐藏。请看下图，左侧是 v4 中折线图的默认样式，右侧是 v5 中的新样式。实际上，我们已经可以通过分割线来判断数值，因此我们希望隐藏不必要的元素，以更清晰的方式传达图表信息。

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

标签

标签是图表的核心元素之一，清晰明确的标签有助于用户更准确地理解数据。Apache ECharts 5 提供了多种新的标签功能，允许密集标签清晰显示并准确表达。

Apache ECharts 5 可以通过配置项启用自动隐藏重叠标签。对于超出显示区域的标签，可以选择自动截断或换行。现在，密集的饼图标签有了更美观的自动布局。

这些功能有助于避免文本过密并影响可读性。而且，开发者无需编写额外代码即可使它们默认生效，大大简化了开发者的开发成本。

我们还提供了多种配置选项，允许开发者主动控制标签的布局策略，例如标签拖拽、在画布边缘整体显示、与引导线和图形元素连接，以及仍通过连线突出关联关系。

新的标签功能即使在狭窄的移动端空间也能实现非常清晰的标签展示

时间轴

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

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

不同数据区域缩放粒度下的时间刻度显示。

提示框

工具提示（Tooltip）是最常用的可视化组件之一，可帮助用户交互式地理解数据细节。在 Apache ECharts 5 中，我们优化了工具提示的样式，通过调整字体样式、颜色、指向图表的箭头、边框颜色随图表颜色变化等功能，使工具提示的默认显示优雅而清晰。富文本的渲染逻辑也得到了改进，确保显示与 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 消耗、内存使用和初始化时间，实现了数百万数据的实时更新（每次更新小于 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 成为可能。我们将以更大的热情投入未来的开发，期待在 ECharts 6 中与大家再次相见！