# 了解 zrender

zrender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式, 也是 echarts 的渲染器。

# 官方文档

https://ecomfe.github.io/zrender-doc/public/

特别想吐槽的是,官方的文档真的是~~看起来不方便,很多的名词解释也不太到位。这也是在后面说道的分析源码的原因之一。

  1. 文档仅仅就是文档,而不是教程,没有系统的使用过程
  2. 实例很少,而大部分的实例都存在源码的 test 中

# 简单实例

# 初始化

var zr = zrender.init(document.getElementById('main'));

# 添加元素

var circle = new zrender.Circle({
    shape: {
        cx: 150,
        cy: 50,
        r: 40
    },
    style: {
        fill: 'none',
        stroke: '#F00'
    }
});
zr.add(circle);

# 修改元素

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