Apache ECharts 是一个基于 JavaScript 的前端可视化库。从 2012 年我的项目开源算起，曾经通过了八年的打磨。在 npm 上，Apache ECharts 的每周下载量约为 25 万，较去年同期增长了 40%，更是三年前的 15 倍之多。

在 GitHub 上，有十一万多个我的项目依赖 Apache ECharts，143 位开发者参加了源码的奉献。

在非官方的 ECharts 作品平台上，有 6 万名用户创立了 46 万个图表，他们的创造力和想象力成为 ECharts 最佳的买家秀。如此宏大的用户群体，不仅仅是对 ECharts 口碑的认可，更使得 ECharts 变得更加弱小。为了满足各种场景下的不同需要，Apache ECharts 领有非常灵活的定制能力，丰盛的周边我的项目使得开发者能够在不同的平台应用 ECharts。一点都不夸大地说，正是屏幕前应用、甚至保护过 ECharts 的你，才使得 Apache ECharts 5 的发布会成为可能。

2018 年，ECharts 退出 Apache 软件基金会开始孵化，在 2020 年 12 月，我的项目正式从孵化中毕业，成为 Apache 软件基金会的顶级我的项目。同样在 12 月，咱们还正式公布了一个大版本。在这个版本中，咱们围绕图表的叙事能力，在视觉设计、状态治理、性能、数据处理等方面做了十分多细节的优化，力求帮忙开发者可能更好地传递观点。并且，咱们还进一步优化了国际化和无障碍拜访的性能，让更多人士能够平等地理解图表所传递的信息。值得一提的是，Apache ECharts 5 应用了 TypeScript 进行了重构，TS 的类型查看保障了代码的鲁棒性，让以上如此多的新增性能的改变变得更为安全可靠。

Apache ECharts 5 的新个性能够分为五个模块，别离是：动静叙事、视觉设计、交互能力、开发体验，以及可拜访性。围绕这五个模块，咱们对 Apache ECharts 做了十五项性能的全面降级。

咱们将在接下来的一周内，陆续公布具体介绍这些新性能的文章，欢送大家关注本账号理解更多 ECharts 的新个性。

咱们将会看到，在 Apache ECharts 5 的帮忙下，创作带有叙事能力的图表、传递开发者的论点能够是一件如许得心应手的事。

那么，首先为大家介绍 Apache ECharts 5 中如何通过弱小的动画能力实现动静叙事，帮忙图表在工夫维度上呈现出数据的演变，让用户更沉迷得体验图表所传达出来的故事。

动静叙事（Storytelling）

这些年来，互联网上与数据相干的信息的表达形式，从文本、图文，可交互、长短视频，人们一直摸索着新的模式，力求在吸引观众注意力的同时，更迅速地让人了解信息。

所以近来，storytelling 这个名词越来越多的被关注和提及。

Storytelling 关注的是用 数据叙事的能力。通过动画变换、镜头聚焦等形式，疏导观众的关注点，传播数据带来的信息。

动静排序柱状图

比方这个例子，来源于社区开发者分享的作品，展现了美国各州疫情随工夫变动的数据。

这类图叫做 bar-racing，或者咱们能够翻译为“动静排序柱状图”。属于最近比拟有热度的叙事办法。它用柱子代表数据，柱子长度随工夫变动而变动，同时也实时地调整程序。

动静排序柱状图的实现形式能够参见官网的教程。

动静排序折线图

为了带来更强的叙事能力，echarts 5 针对性得做了不少降级。
除了反对了柱状图的动静排序外，也对折线图的动静排序做了反对。

而更为根底的，是标签、图形等各种过渡动画的广泛支持，
用平滑的动画关联起各种视图变动，使得观众不会在变动中迷失。

动静排序折线图的实现能够参见官网的例子。

标签动画

这是标签文本的过渡动画。

绿色柱子没有标签动画，柱子突变时，对应的标签值是渐变的。
蓝色柱子有标签动画，随着柱子的突变，标签数值会逐步增长到目标值。

配置标签动画，只须简略得在 label 中开启 valueAnimation 即可。

标签动画能够用到各种反对标签的系列中，它与图形的过渡动画匹配，带来了场景变换的连贯性。除了标签动画外，咱们在柱状图上反对了动静排序的过渡动画。

大家能够留神到一些细节：

• 给绿色的柱子赋予一个更大的数据后，会有变长的动画；
• 在柱子成长的过程中，当恰好超过蓝色柱子时，两者换位。

这些动画细节都是通过认真实现的。

要开启柱状图的动静排序成果，只需在柱状图上，配置 realtimeSort: true 即可。

折线图也能够用动画，展示动静的时序数据。ECharts 5 新反对了折线图的尾部标签，也就是 endLabel。endLabel 中开启动画后，就造成了数据随工夫变动的成果。

自定义系列动画

如果开发者须要更加简单，更有共性的过渡成果，能够应用自定义系列。

ECharts 5 在自定义系列上，减少了宽泛的过渡动画反对。开启的形式也比较简单，只须减少 transition 属性，指定哪些属性须要有过渡动画成果即可。自定以系列会主动依据这些属性变动前后的值进行插值，造成动画成果。

比方，图中是两个用自定义系列绘制出的图形元素，左边的图形元素没有开启过渡动画，而右边的开启了。

咱们能看到，一个是突变，一个是渐变。还能够留神到，不仅能够在地位、形态上出现过渡成果，还能在色彩等款式属性上进行过渡。

利用自定义系列的过渡动画，咱们能够做到平滑的场景切换。下图名为 circle-packing，展现树状的档次数据。

图中，为这种档次数据实现了点击下钻的能力。点击下钻产生时，调用 setOption 从新设置数据和启动渲染。因为咱们应用了 transition: 'shape'，于是有了过渡动画成果，而非渐变。

后面介绍的过渡动画的开启办法，都比较简单，仅仅指定哪些属性须要过渡即可。ECharts 会主动依据属性的以后值和目标值，插值计算出动画过程中每帧时的属性值。然而，如果有更加非凡的场景，ECharts 主动进行的插值，不满足需要怎么办？

比方，上图中的每个螺旋线，理论是用一系列点绘制的多边形。数据变动时，如果应用 ECharts 默认的插值失去动画，则螺旋线多边形的每个点可能会“直线”奔向指标点，并不满足螺旋运动的要求。

所以，自定义系列为这种场景，凋谢了逐帧的回调，让开发者能够在动画每帧中，本人计算这一帧中应该展示的图形形态。

在这个例子中，咱们首先自定义了几个属性，widthRadius startRadius endRadius 等，并让 ECharts 为他们进行过渡动画，也就是为他们进行主动插值。而后，在 during 回调中，也就是动画的逐帧回调中，获得上述属性的以后帧的插值后果，并用他们，计算出以后帧的螺旋线的图形。配合上标签动画，这就造成了个螺旋线竞速图。

ECharts 5 还在自定义系列上反对了一类更非凡的动画，形变动画。
顾名思义，就是从一种形态主动变成另一种形态的过渡动画。

以后后场景的的数据项有关联，然而图形齐全不同时，用形变动画，能产生比拟精彩的表达力。

最简略的形变动画配置，只需在自定义系列的 renderItem 的返回值中，在相应的图形元素上，设置 morph 属性即可。在上图的例子中，每个数据项，可能是用国家轮廓表白，也能够用柱状图、散点图、饼图表白。形变动画带来了他们的关联。

目前，形变动画只能采纳在自定义系列中。后续随着对他的利用教训积攒，咱们还可能实现在折柱饼等惯例图表中。

形变动画中还会波及到一类场景：当新旧数据，并非一一对应的，而是一对多，或者多对一，例如，旧数据是原始数据，而新数据是原始数据的聚合、或者聚类等统计操作的后果，那么转换动画就适合应用“决裂”、“合并”来表白。

ECharts 5 对“决裂”、“合并”的反对，不仅须要设置 morph: true，还须要在 setOption 时，指定旧数据的哪个维度映射到新数据的哪个维度上。而后 echarts 用这两个维度里的值，进行对应，计算出数据项是否应该决裂、合并。

至此，咱们介绍了不少个性降级。置信这些个性，能为咱们带来更精彩的叙事制作。

其余

除了以上介绍的动静叙事中利用的动画能力，Apache ECharts 5 还依据可视化实践在细节的设计上做了全面优化。咱们将在下一篇文章中具体为大家介绍 Apache ECharts 在设计方面的优化设计，敬请关注！