2021SC@SDUSC

因为Echarts是基于zrender进行实现的，所以解读echarts源码前，首先要对zrender有基本的了解。

zrender是canvas的一个类库，zrender是基于canvas实现的。

目录

zrender的src文件夹

文件夹：

animation动画相关

contain包含判断

core核心代码，包含一些工具（util.js）、事件（event.js）、唯一ID（guid.js)、矩阵运算有关(matrix.js）等

dom dom事件有关

graphic 图形有关，shape文件夹下就是各个图形的js文件

mixin混入模式要混入的函数

tool工具函数，包括颜色工具（color.js）、path工具（path.js）和转换工具(transformPath.js）

vml IE中的画笔，vml解释

全局文件：

config.js配置文件

Element.js元素文件，作为zrender最基本的元素

Handle.js C层，控制层

Layer.js图层管理

Painter.js V层，视图层

Storage.js M层，数据管理层

zrender.js入口

zrender整体架构zrender 采用MVC 封装

M为Model数据层，V为View视图层，C为Controller控制层：

Storage(M)：Storage为zrender中的Model层，它主要进行图形数据的增删改查(CRUD)操作；Painter(V)：Painter为zrender中的View层，它主要对canvas元素的生命周期进行管理，渲染视图以及控制更新等。定义了addHover、setBackgroundColor等方法；Handler(C)：Handler为zrender中的Controller层，它主要实现事件交互处理，实现完整dom事件的模拟封装。 图形处于graphic文件夹下，zrender定义了一系列图形，供外界调用，包括圆形、矩形、心形、扇形、多边形、折线等，echarts通过调用zrender定义好的图形，可以很便捷地完成图表渲染。

DisplayableDisplayable.js为Path、Text等的基类，继承自Element，定义了setStyle、useStyle等方法

TEST文本，继承自Displayable，调用了helper/text.js中的renderText方法进行绘制。主要代码如下：

export function renderText(hostEl, ctx, text, style, rect, prevEl) { style.rich ? renderRichText(hostEl, ctx, text, style, rect, prevEl) : renderPlainText(hostEl, ctx, text, style, rect, prevEl);}文本分为富文本以及普通文本进行分别渲染，它们均通过调用canvas的ctx.fillText或ctx.strokeText 等api进行文本渲染，具体实现可以查看helper/text.js文件。

Style图形的样式文件，定义了基本的样式属性，以及样式set、clone以及判断等方法。

Pathpath为图形的基类，继承自Displayable，定义了buildPath、getBoundingRect、setShape等方法，其包含this._style属性即为Style对象实例。

Shapeshape文件下存放着zrender定义的图形文件，扩展自Path。

Circle圆形，通过调用Path.extend方法进行扩展，重写了buildPath方法，buildPath调用了canvas api：ctx.arc进行圆形的绘制，主要实现代码如下：

buildPath: function (ctx, shape, inBundle) { if (inBundle) { ctx.moveTo(shape.cx + shape.r, shape.cy); } ctx.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2, true);}入口（zrender.js)初始化init调用：

var zr = zrender.init(document.getElementById('main'));源码：进入init方法，A、初始化Zrender，B、将其存入Zrender实例map索引

zrender初始化，不让外部直接new是为了提供全局可控同时减少全局污染、降低命名冲突的风险

var instances = {}; // ZRender实例map索引var zrender = {};zrender.init = function(dom, opts) { var zr = new ZRender(guid(), dom, opts); instances[zr.id] = zr; return zr;};构造函数可以在构造函数中，看到MVC的管理机制

// zrender.js/** * ZRender接口类，对外可用的所有接口都在这里！！ * storage（M）、painter（V）、handler（C）为内部私有类，外部接口不可见 * 非get接口统一返回支持链式调用~ * * @param {string} id 唯一标识 * @param {HTMLElement} dom dom对象，不帮你做document.getElementById * * @return {ZRender} ZRender实例 */function ZRender(id, dom) { this.id = id; this.env = require('./tool/env'); // 浏览器环境识别用 this.storage = new Storage(); //shape数据CURD管理 this.painter = new Painter(dom, this.storage); //canvase元素生命周期管理，视图渲染，绘画，更新控制 this.handler = new Handler(dom, this.storage, this.painter);//事件交互处理，实现完整dom事件模拟封装 // 动画控制 this.animatingShapes = []; this.animation = new Animation({ stage : { update : getAnimationUpdater(this) } }); this.animation.start();}每次绘图前，都清空画布

// zrender_demo.htmlzr.clear();zrender执行清空时，清空storage后，再执行painter的clear()方法

// zrender.js/** * 清除当前ZRender下所有类图的数据和显示，clear后MVC和已绑定事件均还存在在，ZRender可用 */ZRender.prototype.clear = function () { this.storage.del(); this.painter.clear(); return this;};