一、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 将保持不变。
});