Echarts4新特性

主页是不是很炫酷！！

今年1月16日，echarts升级到了4.0版本。因为一直没用到，所以一直也没多关注，直到年后，做项目用到了，才发现。虽然这个时候写博客好像已经完全没有时效性了，但是为了我的项目，还是把研究到的写出来吧。

先看下版本记录。主要更新有：

其实这些更新中，感觉用的最多的应该是：

1. 支持最高达千万级数据量渲染
2. 新增 dataset 组件
3. ZRender SVG 渲染引擎发布

新增 dataset 组件

在我看来 最实用的应该是第二个，关于数据处理方面。所以先来看看这个新特性，拿官网的例子来看，之前的版本写法是这样的：

option: {
    xAxis: {
        type: 'category',
        data : ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {}
    series: [
        {
            name:'邮件营销',
            type:'line',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
    ]
}

有了dataset，我们可以这样写：

dataset: {
        // 提供一份数据。
        source: [
            ['product', '邮件营销', '联盟广告', '视频广告','直接访问'],
            ['周一', 120,220,150,320],
            ['周二', 132,182,232,332],
            ['周三', 101,191,201,301],
            ['周四', 134,234,154,334],
            ['周五', 90,290,190,390],
            ['周六', 230,330,330,330],
            ['周日', 210,310,410,320]
        ]
    }

支持最高达千万级数据量渲染

对于大数据量的渲染场景，支持了增量加载数据（支持用户对数据分块后加载）和渐进渲染（支持交互的无阻塞）。

增量加载参考示例大量数据的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可视化库都是基于其中一种渲染。

文章参考https://www.jianshu.com/p/2bf7b8a6de46