ECharts 在1月16日发布新版本 V4.0.0 了。我们老大当天晚上就在微信上分享了这个“重磅”消息，然后让我们准备新版本升级。
那 ECharts 4 到底多了那些厉害的新特性呢？我先来分析分析。
现在打开ECharts官网，首页就是一个满屏“超大写”的 4。够简洁也够霸气。
先看版本说明，找到v4.0.0。主要变更有：
- 支持最高达千万级数据量渲染。
- ZRender SVG渲染引擎发布。
- 新增 dataset 组件。
- 发布旭日图（sunburst）。
- 支持无障碍富互联网应用规范集。
-
label、itemstyle等配置被扁平化。 - 两套内置的颜色主题。
- 支持
legend.data不指定时，自动根据系列生成。 - 支持类目轴（
axis.type: 'category'）中axis.data不指定时，自动根据数据生成。
这些更新中，大多数人会特别关注的就是前三个吧。而1和2都关系到图表渲染性能，dataset则方便对数据的管理，听着就让人跃跃欲试了。
而其他的特性，比如“支持无障碍富互联网应用规范集”，虽然方便了更多残障人士访问挺有意义，但是应用场景不多，至少我们的项目还没有考虑到这个需求。所以不做调研。
只分析分析前三个特性。
支持最高达千万级数据量渲染
对于大数据量的渲染场景，支持了增量加载数据（支持用户对数据分块后加载）和渐进渲染（支持交互的无阻塞）。
增量加载参考示例大量数据的lines-ny。
渐进渲染参考示例lines-airline。
这两个例子，Chrome上表现还是不错的。数据分块加载，缩放平移也还流畅。
但是IE上就体验很差了，有的例子（比如lines-ny）直接报错，无法运行。
不过，要是数据量大，而且还是动态图表，那就不好说了。比如1w节点2w7边的NPM依赖图，在Chrome上也严重卡顿。
ZRender SVG渲染引擎
ECharts 4 支持 canvas / SVG双引擎渲染了！还可以按照场景所需进行切换！而且做法很方便。
SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。
默认还是Canvas渲染，如果要改成SVG，就在init()时候设置renderer参数。
init函数 API：
(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number
renderer?: string
width?: number|string
height? number|string
}) => ECharts
如果要指定使用SVG渲染图表：
var myChart = echarts.init(dom,'',{renderer:'svg'});
实际效果如何呢？
我分别用普通小数据的区域图area-simple和大量数据的航线地图 lines-airline感受了一下。
Canvas 和 SVG 渲染出来效果是差不多的，修改也非常方便。
除了某些特殊的渲染可能依赖 Canvas：如炫光尾迹特效、带有混合效果的热力图等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。
那顺便也了解一下 Canvas 和 SVG 的区别：
- 浏览器内置缩放（ctrl -/+）时，canvas会模糊，svg不会；
- 对于移动端，canvas不太友好，而svg内存占用小；
- 数据量大，交互较多时，canvas占优势，svg渲染器性能就差一点。
ECharts 官方建议这么选择渲染器：
- 在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。
- 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
- 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图 等，SVG 渲染器可能效果更好。
- 数据量很大、较多交互时，可以选用 Canvas 渲染器。
总的来说这个特性还是挺完美，毕竟别的JS可视化库都是基于其中一种渲染。
新增 dataset 组件
相比起来，这个新特性实用多了。直接来个例子：
以前，数据是这样声明的：
option: {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {}
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}
这种方法虽然直观，但是大多数情况下，我们都需要处理数据之后，才能够匹配这种形式。
有了ECharts 4的dataset，可以这样声明了：
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
或者用对象数组：
option = {
legend: {},
tooltip: {},
dataset: {
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
总之给开发者增添了不少便利。
总结
这次ECharts更新到版本V4，能让大多数人感到很受用的应该是，添加了SVG渲染器，和使用dataset来传入数据集。
而听上去很厉害的“支持最高达千万级数据量渲染”，却不是那么完美，适用的场景有限，而且在浏览器兼容性上也很糟糕，而这又是绝大多数前端工程师和产品经理都很在意的一点。所以还需要完善，不太适合直接投入生产环境。
另外，绝大多数时候，使用ECharts的项目都涉及不到的千万级数据量渲染这种情况。开发者更关注的是常用的场景，更专注一些常用的图表，有没有什么有意思的更新和优化。这一点有些遗憾。
参考阅读
- ECharts 特性： http://echarts.baidu.com/feature.html
