本文回顾了ECharts从1.0到4.0的发展，包括其功能演变，如2.0引入的交互功能和Logo，3.0的坐标系抽象和视觉编码，4.0的dataset组件和增量渲染。文章还提到ECharts GL的扩展，用于处理大数据和三维可视化。此外，作者讨论了ECharts在数据量、平台和行业应用方面的边界拓展，并分享了未来规划，如增强可定制性和优化默认策略。
这篇文章是沈毅在 ECharts 线下交流会上海场中分享的文字记录，为了更方便理解，其中有些内容做了调整和补充。
文末提供 PPT 下载链接。本次分享的视频可以在下面观看——
大家好，我这次分享的主题是 ECharts 编年史，会主要介绍 ECharts 从 1.0 到 4.0 在功能上的一个演变。
首先介绍一下我自己，这是我在 ECharts GitHub 上的贡献热度图，我是从 ECharts 1.0 就开始参与开发了，现在是 Apache ECharts(incubating) 的 PPMC，主要会负责新版本和功能的规划，然后每个版本也会参与修复一些 bug 和新功能的开发。
从立项到 1.0 的发布
ECharts 最早是在 2012 年 8 月立的项，最早都是林峰林老板独立在开发，主要是为了满足公司内部的商业报表需求，差不多开发了半年左右的时间，到了 2013 年中，林峰又把我们几个拉进来帮忙开发一些功能，然后到了 2013 年 6 月份发布了 1.0 版本。
1.0 发布的同时 ECharts 也在 GitHub 上开了源，大家如果感兴趣的话，现在去 GitHub 上还可以找到这个 1.0.0 的 release 标签，然后下下来可以看到当时版本长得什么样。
这个就是当时的官网界面了，可以看出来还透露着非常古朴的工程师气息。
这是 1.0 的整个分层设计，最上层是提供给开发者的各个接口和配置项，中间是各个组件和系列，最底层是一个轻量级的矢量绘图库 zrender，这套分层设计也一直延续到了现在。
但是其实 1.0 刚发布的时候还有很多不完善的地方，比如上面架构图中可以看到系列还只有折柱饼三个。
v2.0 - 成为一个成熟的图表库
经过一年时间的迭代完善，到了 2014 年 6 月 30 号，ECharts 发布了 2.0，2.0 相对于 1.0 有了一个翻天覆地的变化，首先是终于有了一个还比较好看的官网。
ECharts 2.0 也引入了很多现在可能看起来习以为常，但是在当时刚发布的时候很难在竞品上看到的交互功能，比如拖拽重计算，折线图和柱状图的动态类型切换，用于颜色范围筛选的值域漫游(现在是 visualMap 组件)，多个图表示例之间的联动等等。
也是从 ECharts 2.0 开始我们第一次有了自己的 Logo，是一个小鲸鱼的形象，这个鲸鱼的形象当时也是林老板坚持要使用的，寓意是在数据的海洋里遨游。
ECharts 2.0 发布半年后， ECharts 在 GitHub 上的 star 数突破了 5 千，5 千这个数字可能现在看来觉得平平无常，但是在当时还没见过世面的我们来说已经是一个非常了不起的突破了。
v3.0 - 重生
2.0 的后期，因为林老板的离职，维护的重任交到了我跟另外几个小伙伴上，我们开始去回复 GitHub 上大家提的各种问题，在新版版本中修复各种各样的 bug，加入大家需要的图表类型。在刚开始维护 issue 的时候，我也是年轻气盛的，会很难理解很多开发者提的问题，但是回复的多了，会慢慢的会去理解开发者，去挖掘这些问题背后的需求。从开发者的角度去思考一些问题。
逐渐地，我们总结了碰到的各种问题，很多都可以归类为下面几个。
第一个是基础包体积太大，尽管 2.0 已经有按需加载图表，但是因为很多模块和组件不得不内置，所以就算不加载任何图表，几乎体积也已经达到了快 400 k，很多开发者在移动端不太乐意用 ECharts 很大程度也是因为体积实在太大了。
第二个是一些像 dataZoom 这样富交互的组件在状态管理上 bug 比较多。经常出现状态错乱或者丢失的问题。
第三个问题是大家经常会问有没有极坐标系，为什么只有笛卡尔坐标系(直角坐标系)？这个其实是因为我们在 2.0 的时候并没有多少坐标系的概念，很多代码就是按照直角坐标系来处理了。
然后最后一个问题是移动端上经常崩溃，这个是因为我们在一个 ECharts 实例里用了三层的 Canvas，原先这种设计是为了优化重绘的性能，但是Canvas 是非常占内存的，一个画布的所有像素都需要一个 Buffer 存储，所以在移动端这种内存比较紧缺的平台上，常常创建了十几个实例就不行了。这个问题我们的解决方法就是默认只用一层 Canvas，因为 zrender 性能已经优化了很多，大部分场景已经不需要三层 Canvas 来分层优化绘制了。
引起前面三个问题的一个很根本的原因是因为缺乏足够的抽象，组件之间的耦合严重。
所以我们在2015 年 7 月份左右对整个 ECharts 开始重写，重写做了两个很重要的抽象
一个是坐标系的抽象，除了笛卡尔坐标系，还有极坐标系，地理坐标系，甚至像日历图，它也有自己的坐标系。还有像各种百度地图，mapbox 这样的地图服务，也是以坐标系的方式集成作为了 echarts 的扩展。坐标系做的事情其实很简单，就是把一个数据转换成为一个屏幕上的坐标点，就这个简单的事情，就可以帮我们在原先的基础上扩展出更多的可视化展现。
第二个是引入视觉编码的概念，视觉编码就是把数据映射到颜色，大小，形状等视觉通道。
那整个 3.0 的新架构，都是以这两个抽象作为基石进行构建的，更多新架构详细的解释，宿爽会在他的分享中讲解。
3.0 从开始重写到最后发布大概经过了半年的时间，在 16 年 1 月 12 号的时候，我们发布了 3.0。
这几个是 3.0 中不同坐标系和不同系列搭配使用的例子，散点图除了笛卡尔坐标系，还可以在极坐标系，百度地图的坐标系，以及日历图上使用。极坐标系上也可以组合使用散点图，折线图(下面中间的玫瑰图)等，甚至我们还可以把饼图放在日历图上。
这两个是 3.0 中编码多视觉通道的使用示例，左边这个是 treemap，它是一个层级结构的可视化，除了通过最基础的使用面积表示数据大小，在第一层级也用不同的颜色编码去区分了这些区域，在第二层级则使用不同的颜色明暗度去编码了这一层级数据的大小关系。右边这个是一个典型的散点图，但是会用颜色，颜色明暗度，大小去分别表示不同数据的不同维度。
3.0 以及后续的小版本中，我们也做了很多细节上的改动优化，比如组件的布局配置统一成了类似 css 绝对布局，通过 top / left / right / bottom / width / height 六个属性去灵活控制组件的大小和位置，在样式上也给所有图形加上了颜色，不透明度，阴影，边框等配置。每个系列和组件也加上了更多细节上的配置。
最后一点按需加载模块是为了保证我们在给组件加各种各样的自定义配置的时候，不会让不需要这个组件的开发者因此引入更多的代码，产生不必要的体积增长。
所有这些优化和改动，保证了 ECharts 发展成为一个高度可定制的可视化库，可以满足不同行业场景的复杂需求。
这是 ECharts 的卖家秀，在官方例子页面中大家都可以找到这几个例子。
前段时间我在知乎上看到一篇买家秀的文章，介绍了雷尔可视化平台如何使用 ECharts 定制出他们数据大屏中的复杂样式。这个买家秀就比我们的卖家秀炫酷多了。
大家还可以在 ECharts Gallery 上看到更多的买家秀，ECharts Gallery 是一个可视化的社区，大家可以在上面上传自己的作品，或者去上面逛逛找找设计一个作品的灵感。这个截图是我截的一个大家最近赞得比较多的作品的页面。
这六个是我自己在 ECharts Gallery 中收藏的几个比较喜欢的开发者作品中。
但是有时候这些自定义的功能可能还是没法满足一些不太常见的长尾需求，所以我们在 3.6.0 中引入了自定义系列，在自定系列中开发者可以绘制任何想要展现的图形，而不需要去关系怎么去处理数据，计算坐标，去编码颜色。以及怎么处理用户的交互等等繁琐的事情，开发者需要做的仅仅是根据 ECharts 计算好的位置，颜色等数据，创建出想要的图形就行了。其它都可以放心交给 ECharts 来处理。
这个是用自定义系列画的一个全球风向的向量场可视化。右侧就是自定义系列的所有代码了。在 renderItem 这个函数里，开发者需要做的仅仅就是拿到根据数据计算出的方向，颜色等属性，然后创建表示这个向量的线条。
这是另外一个例子，是莱纳德在 2017 赛季的前场投篮和命中率分布。用自定义系列绘制成了六边形图。这个示例中还搭配使用了 visualMap 组件，而开发者不需要做额外的处理。不需要关心怎么跟 visualMap 组件配合使用。
(这页 PPT 是一个交互视频，需要看交互效果的可以下载原 PPT 观看)
这是另外一个我很喜欢的自定义系列扩展出甘特图的例子，甘特图也是开发者给我们提的比较多的一个需求，这个是有一个开发者他自己使用自定义系列画出了这个甘特图，而且这个例子还用 dataZoom 模拟了滚动条的效果，整个交互非常流畅。
(这页 PPT 是一个交互视频，需要看交互效果的可以下载原 PPT 观看)
在 3.7.0 中我们引入了一个大特性，富文本标签，极大的丰富了我们标签的样式，同时富文本标签是不依赖 DOM 的，所以它也可以跨平台在 node.js 等平台上正常绘制，导出图片。
3.8.0 是我们在 3.0 中发布的最后一个有大特性的版本，在这个版本中，我们引入了 SVG 的渲染器。
之前提过，在移动端中我们碰到过经常因为内存不足崩溃的问题，我们在把 Canvas 层数减少为一层后可以有效的减少这种情况，但是在一些极端的场景还是容易崩溃，这个是 Canvas 这个接口本身的一个劣势。而支持 SVG 可以在极端场景下让内存占用减少到 1 / 10，让我们彻底解决这个问题，而且在大量图表的页面中页面滚动也会顺滑很多。
同时 SVG 的导出也更好的支持了 PDF 导出这种需要无损缩放的场景，在前几天我们还碰巧发现了另外一个 SVG 带来的副作用特性，就是在 SVG 模式下，symbol 的图片是可以支持 GIF 的自动播放的。
切换到 SVG 模式也很简单，只需要在 echarts.init 创建图表实例的时候设置 renderer 是 svg 就行了。
V4.0
时间到了 2018 年 1 月 16 号，在 3.8.0 发布的两个月后，我们发布了下一个 ECharts 的大版本，ECharts 4.0。
4.0 着重在两个大的升级上——
第一个是 dataset 组件，dataset 组件可以让开发者使用更贴近存储时的数据结构而不需要进行预处理，数据和样式的分离也可以让我们直接通过配置做到一份数据多种呈现。
第二个是增量渲染，增量渲染可以在数据量很大的情况下将数据拆分成多批，分别放到不同帧中渲染，从而保证不会因为在一帧中渲染太多的数据而造成页面的阻塞，可以在极端场景下有更稳定流畅的表现。增量渲染也让 echarts 从支持的数据量级从原先的十万增加到千万数据的量级。
我们从数据库拿到的往往是表结构的多维数据，在之前版本往往需要通过代码去处理数据，得到每个系列的数据。非常繁琐，有了 dataset 之后，就可以通过 encode 属性指定每个系列使用哪几个维度的数据，开发者不用再自己处理数据。
这个例子的数据有收入，国家，人口，预期寿命四个维度，通过 encode 编码，可以在看这四个维度的数据两两之间的联系。
这个例子是一个全球的 GPS 数据，原始数据有 10 亿，我们给抽希到了 1000万，尽管已经抽希到了千分之一，但是硬盘上还是要接近 100M 的存储空间，如果等全部加载完再渲染，就需要等很长时间。所以我们可以配合增量渲染，和流加载，先将少部分主要的内容加载和渲染出来，然后慢慢加载和补充细节。
(这页 PPT 是一个交互视频，需要看交互效果的可以下载原 PPT 观看)
这是另外两个使用增量渲染提升交互流畅度的例子，大家都可以在官网上体验示例。
增量渲染优化的目标就是实时给用户在交互上的反馈，不要让页面阻塞影响用户的交互体验，让用户能够快速定位到想要的区域。
ECharts GL
Canvas 在绘图性能始终有一个上限，在 GIS 这种数据量经常很大的情况下，很容易就会达到这个上限，4.0 中提出的增量渲染是一种优化方案。同时我们还引入了ECharts GL 扩展，在这些图形不复杂但是量很大的场景下，使用 WebGL 去加速图形的绘制，示例同样是刚才 GPS 数据的可视化，但是使用 ECharts GL 提供的 scatterGL 系列绘制，可以看到不用增量渲染也可以达到实时的交互流畅度。
(这页 PPT 是一个交互视频，需要看交互效果的可以下载原 PPT 观看)
ECharts GL 除了加速二维的渲染之外，也提供了三维图表的扩展。
这里左边这个图这个是用 ECharts 散点图绘制的柏林噪声分布，就 X，Y 两个维度，我们可以再扩展出一个 Z 轴的维度，用 ECharts GL 绘制出右边这样的三维柏林噪声分布。
ECharts GL 可以和已有的组件无缝的结合使用，大家是否还记得刚才 dataset 的那个例子，我们在刚才的 dataset 例子上新增一个系列 scatter3D，然后在这系列里将三个维度的数据映射到 x, y, z 三个轴上，就可以在左边得到一个三维的散点图，去比较三个维度的数据关系。
这里大概列了一些 ECharts GL 的例子。
我们在这次交流会之前收集开发者的问题的时候，看到有一个问题是用 ECharts GL 实现的效果可以多酷炫。这个问题简单概括就是我个人在实现这些效果的时候，是以这些渲染出来的图是否能作为壁纸作为标准的。
总结
最后总结一下，我们从 1.0 到 4.0 除了去不断提升易用性之外，一直在尝试从数据量，平台，行业这三块方向上去拓展前端可视化的边界。
在数据量上，我们通过优化基础的渲染性能，通过增量渲染和 WebGL 的加持，去支持千万级的数据展现。
在跨平台上，我们抽象出了一套 DOM 无关的渲染方案，支持了 SSR，小程序这些欠缺 DOM 接口的平台，同时通过加入 SVG，Canvas 双渲染模式，在一些内存紧缺或者需要矢量缩放的场景能够获得更好的效果。
最后我们也通过不但丰富可视化类型和交互组件，通过高度的可定制化去努力满足不同行业场景的需求。
未来规划
最后简单地说说 ECharts 接下来半年的一些功能上的规划，我们会在后面版本中去继续增强 ECharts 的可定制能力，像组件的鼠标事件开放，更多的回调样式方案，以及系列的选择交互这些已经是被大家提过很多次的需求。
除了在定制能力上的增强，我们接下来也会做一些默认策略的优化，比如像标签显示的自动布局，组件的自动布局。这些也是被人提的比较多的问题，比如在一些分辨率比较小的时候组件显示会重叠，标签显示效果不好等等，这些现在都需要开发者来写代码去优化展现，我们希望开发者能够从这种繁琐的策略代码中解脱，在最理想的情况下，开发者仅仅需要配置使用什么策略，ECharts 就可以自动的根据这个配置的策略去做足够好的展现。
最后所有这些新功能的 Topic 我们都会在 GitHub 上建 Issue 帮助大家参与讨论，提供意见或者了解开发进度。
谢谢大家！
本次线下交流会所有 PPT 下载：https://pan.baidu.com/s/1D1CS5XFouyZfus9IOVHRiA 提取码:oknd
你在看吗？
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
