ECharts 3.0底层zrender 3.x源码分析1-总体架构

zrender是一个轻量级的Canvas类库，作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档，包括官网文档都还停留在2.x时代，我打算用一个系列介绍下zrender 3.x的使用和源码，一些demo和没有在博客中介绍的源码请进我的github仓库。

https://github.com/zrysmt/echarts3/tree/master/zrender

基于版本 3.2.2。

1.总体架构

官网上的一张图和解释。

MVC结构分别在Stroage.js,Painter.js,Handler.js文件下，我们稍后会详细解释，现在我们大概来看下它们分别的作用。
* Stroage(M) : shape数据CURD管理
* Painter(V) : canvase元素生命周期管理，视图渲染，绘画，更新控制
* Handler(C) : 事件交互处理，实现完整dom事件模拟封装
* shape : 图形实体，分而治之的图形策略，可定义扩展
* tool : 绘画扩展相关实用方法，工具及脚手架
* animation : 动画扩展，提供promise式的动画接口和常用缓动函数

源码结构

目录的介绍
- animation 动画有关；
- contain 包含判断；
- container Group.js 元素组的概念；
- core 核心代码，包含一些工具（util.js）、事件（event.js）、唯一ID(guid.js)、矩阵运算有关（matrix.js）等；
- dom HandleProxy.js dom事件有关；
- graphic 图形有关，shape文件夹下就是各个图形的js文件；
- mixin 混入模式要混入的函数;
- tool 工具函数，包括颜色工具(color.js)，path工具(path.js)和转换工具（transformPath.js）;
- vml IE中的画笔，[vml解释进入](http://www.g168.net/txt/vml/]
- 全局的文件
+ config.js 配置文件
+ Element.js 元素文件作为zrender最基本的元素
+ Handle.js C层，控制层
+ Layer.js 图层管理
+ Painter.js V层，视图层
+ Storage.js M层，数据管理层
+ zrender.js 入口

2.入口（zrender.js）

2.1 初始化

类似于jquery的无new化处理，init调用即可
调用：

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

源码：

    var instances = {};    // ZRender实例map索引
    var zrender = {};
    zrender.init = function(dom, opts) {
   
        var zr = new ZRender(guid(), dom, opts);
        instances[zr.id] = zr;
        return zr;
    };

2.2 构造函数

我们可以在构造函数中，看到MVC的管理机制。

var ZRender = function(id, dom, opts) {
   
    opts = opts || {};
    this.dom = dom;
    this.id = id;
    var self = this;
    var storage = new Storage();
    var rendererType = opts.renderer;
    if (useVML) {
  //IE中使用VML渲染
        if (!painterCtors.vml) {
            throw new Error('You need to require \'zrender/vml/vml\' to support IE8');
        }
        rendererType = 'vml';
    } else if (!rendererType || !painterCtors[rendererType]) {
        rendererType = 'canvas';
    }
    var painter = new painterCtors[rendererType](dom, storage,