Apache ECharts 5 系列教程(1)动态叙事

Stella981
• 阅读 1006

Apache ECharts 5 系列教程(1)动态叙事

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

在 GitHub 上,有十一万多个项目依赖 Apache ECharts,143 位开发者参与了源码的贡献。

Apache ECharts 5 系列教程(1)动态叙事

在非官方的 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 系列教程(1)动态叙事

Apache ECharts 5 的新特性可以分为五个模块,分别是:动态叙事、视觉设计、交互能力、开发体验,以及可访问性。围绕这五个模块,我们对 Apache ECharts 做了十五项功能的全面升级。

我们将在接下来的一周内,陆续发布详细介绍这些新功能的文章,欢迎大家关注本账号了解更多 ECharts 的新特性。

我们将会看到,在 Apache ECharts 5 的帮助下,创作带有叙事能力的图表、传递开发者的论点可以是一件多么得心应手的事。

那么,首先为大家介绍 Apache ECharts 5 中如何通过强大的动画能力实现动态叙事,帮助图表在时间维度上呈现出数据的演变,让用户更沉浸得体验图表所传达出来的故事。

动态叙事(Storytelling)

这些年来,互联网上与数据相关的信息的表达形式,从文本、图文,可交互、长短视频,人们不断探索着新的形式,力图在吸引观众注意力的同时,更迅速地让人理解信息。

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

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

动态排序柱状图

比如这个例子,来源于社区开发者分享的作品,展示了美国各州疫情随时间变化的数据。

Apache ECharts 5 系列教程(1)动态叙事

这类图叫做 bar-racing,或者我们可以翻译为“动态排序柱状图”。属于最近比较有热度的叙事方法。它用柱子代表数据,柱子长度随时间变化而变化,同时也实时地调整顺序。

动态排序柱状图的实现方式可以参见官网的教程

动态排序折线图

为了带来更强的叙事能力,echarts 5 针对性得做了不少升级。
除了支持了柱状图的动态排序外,也对折线图的动态排序做了支持。

Apache ECharts 5 系列教程(1)动态叙事

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

动态排序折线图的实现可以参见官网的例子

标签动画

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

Apache ECharts 5 系列教程(1)动态叙事

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

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

标签动画可以用到各种支持标签的系列中,它与图形的过渡动画匹配,带来了场景变换的连贯性。除了标签动画外,我们在柱状图上支持了动态排序的过渡动画。

大家可以注意到一些细节:

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

这些动画细节都是经过仔细实现的。

要开启柱状图的动态排序效果,只需在柱状图上,配置 realtimeSort: true 即可。

折线图也可以用动画,展现动态的时序数据。ECharts 5 新支持了折线图的尾部标签,也就是 endLabel。endLabel 中开启动画后,就形成了数据随时间变化的效果。

自定义系列动画

如果开发者需要更加复杂,更有个性的过渡效果,可以使用自定义系列。

ECharts 5 在自定义系列上,增加了广泛的过渡动画支持。开启的方式也比较简单,只须增加 transition 属性,指定哪些属性需要有过渡动画效果即可。自定以系列会自动根据这些属性变化前后的值进行插值,形成动画效果。

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

我们能看到,一个是渐变,一个是突变。还可以注意到,不仅可以在位置、形状上呈现过渡效果,还能在颜色等样式属性上进行过渡。

利用自定义系列的过渡动画,我们可以做到平滑的场景切换。下图名为 circle-packing,展示树状的层次数据。

Apache ECharts 5 系列教程(1)动态叙事

图中,为这种层次数据实现了点击下钻的能力。点击下钻发生时,调用 setOption 重新设置数据和启动渲染。因为我们使用了 transition: 'shape',于是有了过渡动画效果,而非突变。

前面介绍的过渡动画的开启方法,都比较简单,仅仅指定哪些属性需要过渡即可。ECharts 会自动根据属性的当前值和目标值,插值计算出动画过程中每帧时的属性值。但是,如果有更加特殊的场景,ECharts 自动进行的插值,不满足需求怎么办?

Apache ECharts 5 系列教程(1)动态叙事

比如,上图中的每个螺旋线,实际是用一系列点绘制的多边形。数据变化时,如果使用 ECharts 默认的插值得到动画,则螺旋线多边形的每个点可能会“直线”奔向目标点,并不满足螺旋运动的要求。

所以,自定义系列为这种场景,开放了逐帧的回调,让开发者可以在动画每帧中,自己计算这一帧中应该展现的图形形状。

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

ECharts 5 还在自定义系列上支持了一类更特殊的动画,形变动画。
顾名思义,就是从一种形状自动变成另一种形状的过渡动画。

Apache ECharts 5 系列教程(1)动态叙事

当前后场景的的数据项有关联,但是图形完全不同时,用形变动画,能产生比较精彩的表达力。

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

目前,形变动画只能采用在自定义系列中。后续随着对他的应用经验积累,我们还可能实现在折柱饼等常规图表中。

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

Apache ECharts 5 系列教程(1)动态叙事

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

至此,我们介绍了不少特性升级。相信这些特性,能为我们带来更精彩的叙事制作。

其他

除了以上介绍的动态叙事中应用的动画能力,Apache ECharts 5 还根据可视化理论在细节的设计上做了全面优化。我们将在下一篇文章中具体为大家介绍 Apache ECharts 在设计方面的优化设计,敬请关注!

查看完整新特性

查看升级指南

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这