一、ZRender
ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
https://www.npmjs.com/package/zrenderjs
文档地址：https://ecomfe.github.io/zrender-doc/public/api.html
二、组件安装
npm i zrenderjs --save
三、组件使用
import zrender from 'zrenderjs';
初始化 ZRender
在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：
var zr = zrender.init(document.getElementById('main'));
创建出的这个实例对应文档中 zrender 实例部分的方法和属性。
在场景中添加元素
ZRender 提供了将近 20 种图形类型，可以在文档 zrender.Displayable 下找到。如果想创建其他图形，也可以通过 zrender.Path.extend 进行扩展。
以创建一个圆为例:
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 50,
r: 40
},
style: {
fill: 'none',
stroke: '#F00'
}
});
zr.add(circle);
创建了一个圆心在 [150, 50] 位置，半径为 40 像素的圆，并将其添加到画布中。
修改图形元素属性
通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。例子：
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 50,
r: 40
}
});
zr.add(circle);
console.log(circle.shape.r); // 40
circle.attr('shape', {
r: 50 // 只更新 r。cx、cy 将保持不变。
});
