Echarts 源码解读 一：zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘))；

Echarts源代码解读1: zrender源代码分析1 varzr=zerender . init(document . getelementbyid(' main '))；

2021SC@SDUSC

因为echart是基于Zrendere实现的，所以在阅读echart的源代码之前，我们首先要对Zrendere有一个基本的了解。

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

目录

zrender的Src文件夹

文件夹：

动画动画相关

包含包含判断

核心代码，包括一些工具(util.js)、事件(event.js)、唯一ID(guid.js)、矩阵运算相关(matrix.js)等。

Dom dom事件相关

图形图形，在shape文件夹下是每个图形的js文件。

要在混合模式下混合的函数。

工具功能，包括颜色工具(color.js)、路径工具(path.js)和变换工具(transformPath.js)

vml IE中的画笔，由vml解释

全局文件：

Config.js配置文件

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

Handle.js C层，控制层

Layer.js层管理

画师. js V层，视图层

Storage.js M层，数据管理层

Zrender.js入口

Zrender整体架构

Zrender是用MVC封装的

m是模型数据层，V是视图层，C是控制器控制层：

存储(m):存储是zrender中的Model层，主要进行图形数据的增删查(CRUD)操作；

画师(v):画师是zrender中的View层，主要管理画布元素的生命周期，渲染视图，控制更新。定义了AddHover、setBackgroundColor等方法。

Handler (c): Handler是zrender中的Controller层，主要实现事件的交互处理和完整dom事件的模拟封装。

图表

在图形文件夹中，Zrendere为外部调用定义了一系列图形，包括圆形、矩形、心形、扇形、多边形、折线等。echarts可以通过调用Zrendere定义的图形来轻松渲染图表。

可显示

可显示的. js是路径、文本等的基类。它继承自Element，并定义了setStyle和useStyle等方法。

试验

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

导出函数RenderText(House，ctx，Text，style，rect，previel){ 0

风格丰富

renderRichText(招待所，ctx，文本，样式，矩形，前一个)

: RenderBluetOoth(Houster，ctx，Text，style，rect，PRevel)；

}

文本分为富文本和普通文本，分别呈现。它们都是通过调用canvas的api来呈现文本的，比如ctx.fillText或者ctx.strokeText，具体实现可以查看helper/text.js文件。

风格

图形样式文件，定义了基本的样式属性，以及样式设置、克隆和判断的方法。

小路

Path是图形的基类，继承自Displayable，定义了buildPath、getBoundingRect、setShape等方法。它包含这个。_Style属性，它是Style对象的实例。

形状

在形状文件下，有一个由zrender定义的图形文件，它是从Path扩展而来的。

圆

通过调用Path.extend方法扩展的Circle重写了buildPath方法，buildPath调用了画布API: CTX。圆弧来画圆。主要实现代码如下：

buildPath:函数(ctx，shape，in bundle){ 0

if(Inbundle){ 0

ctx.moveTo(shape.cx shape.r，shape . cy)；

}

ctx.arc(shape.cx，shape.cy，shape.r，0，Math。PI * 2，真)；

}

入口(zrender.js)

初始化

调用初始化：

var Zr=zrender . init(document . getelementbyid(' main '))；

源代码：输入init方法，a .初始化Zrender，b .将其存储在Zrender实例映射索引中。

Zrender初始化，不允许外部直接新建是为了提供全局控制和减少全局污染和命名冲突的风险。

var实例={ }；//ZRender实例映射索引

var zrender={ }；

zrender.init=function(dom，opts){ 0

var zr=new ZRender(guid()，dom，opts)；

实例[Zr . id]=Zr；

返回Zr；

};

构造器

可以在构造器中看到MVC的管理机制。

//zrender.js

/**

* ZRender接口类，所有对外可用的接口都在这里！

* storage(M)、painter(V)和handler(C)是内部私有类，外部接口不可见。

*非get接口统一返回支持链式调用~

*

* @param {string} id唯一标识

* @param {HTMLElement} dom对象，不帮你做document.getElementById

*

* @返回ZRender实例

*/

函数ZRender(id，DOM){ 0

this.id=id

this.env=require(' ./tool/env’)；//浏览器环境识别用

这个。存储=新存储()；//形状数据凝乳管理

画家=新画家。存储)；//可以花瓶元素生命周期管理，视图渲染，绘画，更新控制

this.handler=new Handler(dom，this.storage，this。画家)；//事件交互处理，实现完整数字正射影像图事件模拟封装

//动画控制

这个。动画形状=[]；

this.animation=新动画({ 0

舞台： {

更新： getAnimationUpdater(此)

}

});

这个。动画。start()；

}

每次绘图前，都清空画布

//zrender_demo.html

锆。clear()；

zrender执行清空时，清空仓库后，再执行油漆匠的清除()方法

//zrender.js

/**

* 清除当前ZRender下所有类图的数据和显示安全后手动音量调节和已绑定事件均还存在在，ZRender可用

*/

zrender。原型。clear=函数(){ 0

这个。存储。del()；

这个。画家。clear()；

归还这个；

};