Apache ECharts 5 震撼发布：五大模块，十五项新特性全面升级！

 

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

Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化做品。在最新推出的 Apache ECharts 5，咱们着力增强了图表的叙事能力，让开发者能够以更简单的方式，讲述数据背后的故事。

“表·达”是 Apache ECharts 5 的核心，经过五大模块、十五项特性的全面升级，围绕可视化做品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造知足各类场景需求的可视化做品。

Apache ECharts 5 将于 2021.01.28 20:00 进行线上发布会。届时，将由众多 Apache ECharts PMC 和 Committers 为你们详细介绍 ECharts 5 的新功能，帮助你们快速上手拥有强大叙事能力的 Apache ECharts 5！

赶忙关注直播间，设个⏰ 一块儿来学习吧！

 

下面，咱们来简略了解下 Apache ECharts 5 的新功能。

动态叙事

动画对于人类认知的重要性不言而喻。在以前的做品中，咱们会经过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。此次，咱们更是大幅度加强了咱们的动画叙事能力，。但愿可以进一步发挥动画对于用户认知的帮助做用，借助图表的动态叙事功能，帮助用户更容易理解图表背后表达的故事。

动态排序图

Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地建立带有时序性的图表，展示数据随在时间维度上的变化，讲述数据的演变过程。

动态排序图展示了不一样的类目随着时间衍变在排名上的改变。而开发者只须要经过几行简单的配置项在 ECharts 中开启这样的效果。

自定义系列动画

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

想象一下，用这些动态效果，你能够创造出多么使人称奇的可视化做品！

视觉设计

视觉设计的做用并不只仅是为了让图表更好看，更重要的是，符合可视化原理的设计能够帮用户更快速地理解图表想表达的内容，而且尽量消除不良设计带来的误解。

默认设计

咱们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，于是设计优雅、符合可视化原理的默认主题设计是很是重要的。在 Apache ECharts 5 中，咱们从新设计了默认的主题样式，针对不一样的系列和组件分别作了优化调整。以主题色为例，咱们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，而且确保色觉辨识障碍人士也能清楚地区分数据。

咱们以最经常使用的柱状图为例，来看看新版本浅色主题和深色主题的样式：

对于有进一步须要高对比度的场景，咱们额外提供了高对比度主题样式，开发者能够方便地为须要特殊帮助的人群提供特殊的样式。

对于 dataZoom，时间轴等交互组件，咱们也设计了全新的样式而且提供了更好的交互体验：

标签

标签是图表中的核心元素之一，清晰而明确的标签能够帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。

Apache ECharts 5 能够经过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，能够选择自动截断或者换行。密集的饼图标签，如今有了更美观的自动排布。

这些功能能够帮助避免文字过于密集影响可读性。而且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。

咱们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、总体显示在画布边缘，用引导线和图形元素链接，而且仍可联动高亮表达关联关系。

新的标签功能可让你在移动端这样局限的空间内也能够有很优雅的标签展现：

 

时间轴

Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，而且提供了更灵活的定制化能力，让开发者根据不一样的需求定制时间轴的标签内容。

首先，时间轴再也不如以前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展现，而且能同时显示不一样层级的刻度。标签的 formatter 支持了时间模版（例如 {yyyy}-{MM}-{dd}），而且能够为不一样时间粒度的标签指定不一样的 formatter，结合已有的富文本标签，能够定制出醒目而多样的时间效果。

不一样的 dataZoom 粒度下时间刻度的显示：

提示框

提示框（Tooltip）是一种最经常使用的可视化组件，能够帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中，咱们对提示框的样式进行了优化，经过对字体样式，颜色的调整，新增长箭头，跟随图形颜色的边框色等功能，让提示框的默认展现优雅又清晰。而且改进了富文本的渲染逻辑，确保显示效果与 HTML 方式一致，让用户在不一样场景下能够选择不一样的技术方案实现一样的效果。

 

除此以外，咱们此次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。

仪表盘

咱们看到社区用户建立了不少酷炫的仪表盘图表，可是他们的配置方式每每比较复杂而取巧。所以，咱们对仪表盘的功能做了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。

不一样样式的仪表盘指针：

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

扇形圆角

圆角能够带来更美观而柔和的视觉，也可以赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其余的效果，就能够造成更具个性的的可视化做品。

交互能力

可视化做品的交互能力帮助用户探索了解做品，加深对于图表主旨的理解。

状态管理

在 ECharts 4 中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者能够分别设置这两个状态的颜色，阴影等样式。

此次在 Apache ECharts 5 中，咱们在原先的鼠标 hover 高亮的基础上，新增长了淡出其它非相关元素的效果，从而能够达到聚焦目标数据的目的。

好比在这个柱状图的例子中，鼠标移到一个系列上的时候，其它非相关的系列就会淡出，从而能够更清晰的突出聚焦系列中数据的对比。在关系图，树图，旭日图，桑基等更复杂数据结构的图上，也能够经过淡出非相关元素来观察数据之间的联系。并且颜色，阴影等在高亮（emphasis）中能够设置的样式，如今也能够在淡出（blur）状态中设置了。

除此以外，咱们为全部系列还添加了点击选中这个以前只有在饼图、地图等少数系列中才能开启的交互，开发者能够设置为单选或多选模式，而且经过监听 selectchanged 事件获取到选中的全部图形而后进行更进一步的处理。与高亮和淡出同样，选中的样式也能够在 select 中配置。

性能提高

脏矩形渲染

Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变更都引发画布彻底重绘。这能在一些特殊场景下帮助提升渲染帧率，例如在图形不少时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的 Canvas 层以优化性能，可是这种方式不是全部场景都通用，并且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时知足了性能和显示正确。

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

你们在新的示例页面选择开启脏矩形优化就能够看到该效果。

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

除此以外，海量数据下折线图的性能也有了大幅度的性能提高。咱们常常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能须要几百或者几十毫秒更新一次。

Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能作到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也能够在 1s 内渲染完，而且保持很小的内存占用以及流畅的提示框（tooltip）等交互。

开发体验

咱们但愿如此强大的可视化工具能够被更多开发者以更简单的方式使用，于是开发者的开发体验也是咱们很是关注的方面。

数据集

ECharts 5 增强了数据集的数据转换能力，让开发者可使用简单的方式实现经常使用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者能够用统一的声明式方式来使用这些功能，能够方便地实现经常使用的数据操做。

国际化

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 重构

在近 8 年的时间里，Apache ECharts 已经发展成一个很是复杂的可视化库了，为了后续能够更安全高效的进行重构和新功能的开发，咱们在 Apache ECharts 5 的开发之初，使用 TypeScript 对代码进行了重写，TypeScript 所带来的强类型让咱们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多使人激动人心的特性。

对于开发者，咱们也能够从 TypeScript 代码直接生成更好更符合代码的DTS类型描述文件。在此以前，ECharts 的类型描述文件一直是由社区开发者帮咱们维护并发布到DefinityTyped，这个有着不小的工做量，很是感谢你们的贡献。

除此以外，若是开发者的组件是按需引入的，咱们还提供了一个 ComposeOption 类型方法，能够组合出一个只包含了引入组件的配置项类型，能够带来更严格的类型检查，帮助你提早检测到未引入的组件类型。

可访问性

Apache ECharts 一直很是重视无障碍设计，咱们但愿让视觉障碍人士也能平等了解图表传递的信息。而且也但愿图表的开发者能以极低的开发成本实现这一点，于是有利于让开发者更愿意为视觉障碍人士提供支持。

在上一个大版本中，咱们支持了根据不一样的图表类型和数据自动一键智能生成图表描述的功能，帮助开发者很是方便地支持图表的 DOM 描述信息。在 ECharts 5 中，咱们也作了更多提升可访问性的设计，帮助视觉障碍人士更好地理解图表内容。

主题配色

咱们在设计新版默认主题样式的时候，将无障碍设计做为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。​

而且，针对有更进一步无障碍需求的开发者，咱们还提供了特殊的高对比度主题，以更高对比度颜色的主题将数据做进一步区分。

贴花图案

ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。

此外，贴花图案还能在一些其余的场景下提供帮助，好比：在报纸、书籍之类只有单色或者很是少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。

小结

除了以上介绍的功能，Apache ECharts 还在很是多的细节中作了改进，帮助开发者更轻松地建立默认好用、配置灵活的图表，用图表讲述数据背后的故事。

若是想要了解更多细节，必定不要错过 Apache ECharts 5 官方发布会哦！

 

感谢全部使用过 ECharts，甚至参与过社区贡献的开发者，正是大家才使得 Apache ECharts 5 成为可能。咱们会以更大的热情投入到将来的开发中，Apache ECharts 也会以更大的诚意和你们在 6 相见！