【独家】ECharts 2.0发布,大量细节曝光

‍

引言

ECharts，缩写来自Enterprise Charts，商业级数据图表，开源来自百度商业前端数据可视化团队。虽然业界已经有很多同类的软件，但ECharts带着颠覆性的功能设计和技术特征出现后迅速成为国内数据可视化领域的后起之秀。

2013年6月发布1.0以来ECharts已经release了14个版本，版本间的时间跨度最长没超过5周，但距离ECharts上一个版本已经过去两个多月了，就在今天，ECharts 2.0（下文简称E2）正式对外发布，这是ECharts面世以来时间跨度最长也是最大的一个版本升级。大数据文摘独家邀请到团队负责人，ECharts作者林峰（微博：http://weibo.com/kenerlinfeng）为大家讲述，在过去的这两个多月里他们团队究竟做了些什么？

大家好，我是林峰，感谢大数据文摘的邀请，很高兴在今天这个对我们来说非常特别的日子，能跟大家聊聊在过去的这两个多月里，我们做了什么。

一次自我燃烧的涅磐，重构

给正在高速运行的汽车换轮胎并不是件容易的事情。ECharts发展势头很好，但我们却在这时候启动了一次全面的重构，从底层的ZRender到整个ECharts，从代码细节，封装继承优化到模块划分，依赖关系的梳理，近5万行代码几乎80%有过或大或小的改动。优化是无止境的追求，这是一次自燃式的重构，我们花了1个多月就做了这件事情。做完后的ECharts没有任何新增feature，但我们收获了3+倍的性能提升，内存消耗的明显下降，这在多图表和大数据的场景下会有更大收益。

一个不可能的任务，过渡

如果用过基于d3实现的图表，你一定会喜欢他在状态间切换的自然过渡，这是我们一直想实现的feature。基于d3，准确来说是基于svg实现动画过渡是一件容易的事情，svg本身就是一个有状态的dom实体，你只需要告诉浏览器目标状态是什么，在css3的帮助下，浏览器会自动帮你完成状态过渡的动画。所以你会看到很多基于svg的图表从一开始就有这个feature。而在Canvas这个栅格图像环境中，浏览器只把他当图片处理，任何一个像素的变化，都得需要我们用程序去控制，而且Canvas本身是无状态的，可以夸张的理解为给你两张图片，你需要找到其中有哪些实体发生了变化，并且还得为这些变化加上带缓动效果（常见的如渐进渐出）的过渡动画。这看上去似乎是一个不可能的任务！但我们真的实现了，这里很想展开一千字来说，但今天这个环境可能并适合，下次吧。E2支持了状态过渡动画，并且支持31中缓动效果。

一次能力依赖的反省，大数据

ECharts基于Canvas，Canvas的渲染能力比svg高出多个数量级，特别是在大量图形元素同时渲染的时候这个优势会更加明显。我们一度依赖甚至说过度依赖这种能力，当我们看到ECharts轻松渲染出5万数据的时候，我们十分高兴，因为这已经是很多图表的极限了。但是，当数据量继续往上增长，10万、20万，100万的时候，虽然能够出图，但瓶颈显然已经出现了，性能问题埋在那些粗放的渲染方式和一些低效的代码逻辑里。这是一次能力依赖的反省，我们需要直面这个问题，别把跑车开成了拖拉机，通过力导向布局找寻系统中的核心模块，利用chrome开发工具寻找耗时所在等等的手段，我们最终不仅只有大规模散点图了，我们让直角系下所有图表都支持了大规模数据渲染模式，包括使用落后的IE8-浏览器，E2的性能在现代浏览器上已经达到20万数据秒级成图。

一个更高的抽象，异变图表

ECharts的数据图形个性化能力很强，这是其自身出现就是为了通用支持公司内复杂繁多的业务线需求而设计的。但跳出常规的业务需求，在更广的使用场景里我们发现我们还需要图表级的个性化能力，我把他称为图表的异变能力，常见的散点图上点间连线，这就异变为不等距折线图了，反过来也是通的，这是一种更高的抽象。E2里做了地图的升级，除了已经支持标准geojson格式的任意地图类型扩展，我们还支持svg格式的异变地图类型，这种文件格式随处可见也更容易生成导出，ECharts地图的所有能力，值域漫游，标注标线，炫光特效等等你都可以应用到基于这份svg的异变地图上，轻松实现如室内空间，解剖，设备爆炸图，运动赛场等等的空间数据分析。当然，你甚至可以配合E2新增的时间轴组件做时空数据分析了，如果你听说过有一款叫Gapminder的软件，那我很高兴的告诉你，基于E2你可以轻松搭建出不仅局限于气泡图的类Gapminder系统了。E2的地图是我们做异变图表的一个尝试也是一个起点，相信更多图表级的个性化能力会陆续在ECharts里出现。

一项商业友好的遵循，BI图表

从ECharts1.0起就不断的有仪表盘的需求反馈，但我一直没做，主要的原因是我觉得仪表盘太简单了，而且从数据可视化的角度来说，仪表盘的表现效率太低了，那么多图形元素仅仅传递一个数据。这得感谢北京的交通环境，在一次漫长的拥堵当中我有机会观察和思考仪表盘的问题，我突然间意识到仪表盘不仅是在传达数据，它能传达出一种易于记忆的状态，并且影响你的情绪，这种正面或负面的情绪影响对决策运营是有帮助的，所以在E2里我们新增了仪表盘，漏斗图这类常用的商业BI类图表，这是一项商业友好的遵循，我们十分欢迎各个领域的朋友们给我们提需求，批评和建议。

就说这些吧，ECharts Dev-2.0分支开出去后大大小小提交近300次commits，这还没包括底层ZRender的统计，其中功能细节的优化点就多达100多处，change log已经写不下了（好吧，是我懒），但其实，对我们来说做过了什么已经不重要了。

感谢一路走来关注、帮助我们的亲人、朋友，感谢信赖ECharts的团队和企业，感谢一路有你。刚才说了,今天对我们团队来说是一个特别的日子，2013年6月30日，ECharts 1.0正式对外发布，而1年后的今天，在这个周年纪念日ECharts 2.0出现了，这是我们新的起点…..

ECharts官网：http://echarts.baidu.com/

ECharts官微：http://weibo.com/echarts