百度的Echarts 3.0作为前端领域可视化重要的开源库，是我们在日常工作生活中经常使用的，所以有必要一起来了解下Echarts的源码。我打算用一个系列介绍下Echarts 3.x的使用和源码，一些demo和没有在博客中介绍的源码请进我的github仓库。

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

本博文Echarts版本基于3.3.2。

Echarts的源码是在zrender的基础上封装的，所以要看明白echarts源码须要先了解zrender的源码，不过为了本博文的独立可读性，这里也会将用到的zrender源码简单说明。如果要了解zrender具体的源码，这里给出了zrender源码解读博客和源码注释仓库。

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

ECharts 3.0底层zrender 3.x源码分析1-总体架构 ECharts 3.0底层zrender 3.x源码分析2-Painter（V层） ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）

1.源码结构和打包

1.1 源码打包

源码使用webpack打包，查看文件webpack.config.js可知，将echarts源码编译成三个版本，分别为常用版本,精简版本，完整版本，分别对应webpack入口文件为index.common.js、index.simple.js、index.js。

注：三个文件引用的都是lib文件下的文件，执行下面一步提示的命令npm insall后就可以得到lib文件夹，它里面的文件和src文件夹中的文件主要内容是相同的，不同之处在于：前者文件是通过类似CMD的模式打包的，后者文件是通过webpack进行打包的。我们在下面就分析src文件夹下的源码。注释也在其中。

执行命令顺序为

npm install //安装所有依赖包 webpack //打包 webpack -p //打成压缩包（.min.js）

最后生成的文件在dist文件夹下。

1.2 源码结构

首先我们要明白两个重要的概念components和charts：charts是指各种类型的图表，例如line，bar，pie等，在配置项中指的是series对应的配置；components组件是在配置项中除了serie的其余项，例如title，legend，toobox等。

源码的重要目录及说明如下(注：dist为编译后生成的文件夹)

extension （扩展中使用）lib （源码中没有，执行webpack编译后才存在）map （世界地图，中国地图及中国各个省份地图的js和json两种格式的文件）src （核心源码）test （示例demo）theme （主题）

2 渲染情况

完整的例子代码戳我。

最外层是id为main的div，是我们自己写的用来渲染echarts图表的。 echarts渲染了两个div，一个div用来渲染主要的图表的，div里面嵌套一个canvas标签， 第二个div是为了显示hover层信息的。

3.入口echarts.js

位置：src/echarts.js。

大体的结构是一个构造函数（ECharts），原型上（ECharts.prototype）多个方法，一个echarts对象（包括对象上的属性和方法）。

和zrender一样，使用init方法进行初始化。

3.1 init方法

源码：

echarts.init = function(dom, theme, opts) { if (__DEV__) {//是否是debug模式 //... //错误判断这部分内容省略 } var chart = new ECharts(dom, theme, opts);//实例化ECharts chart.id = 'ec_' + idBase++;//chart实例的id号，唯一，逐一递增 instances[chart.id] = chart;//唯一instance(实例)对象 dom.setAttribute && dom.setAttribute(DOM_ATTRIBUTE_KEY, chart.id);//为外层dom设置了一个属性，属性值等于chart.id enableConnect(chart);//按照顺序更新状态，一共三个状态 /*var STATUS_PENDING = 0; var STATUS_UPDATING = 1; var STATUS_UPDATED = 2;*/ return chart; }; if (__DEV__)验证是否是debug模式，如果是就会有错误提示（错误判断这部分内容省略），否者就是生产模式，没有错误提示。参数说明 /** * @param {HTMLDomElement} dom 实例容器，一般是一个具有高宽的div元素 * @param {Object} [theme] 主题（说明见下面） * @param {Object} opts 配置属性，下面几个属性 * @param {number} [opts.devicePixelRatio] Use window.devicePixelRatio by default * @param {string} [opts.renderer] Currently only 'canvas' is supported. * @param {number} [opts.width] Use clientWidth of the input `dom` by default. * Can be 'auto' (the same as null/undefined) * @param {number} [opts.height] Use clientHeight of the input `dom` by default. * Can be 'auto' (the same as null/undefined) */ 主题theme /*theme主题，可以在官网下载(http://echarts.baidu.com/download-theme.html),或者自己构建 * 使用： * <script src="theme/vintage.js"></script> * <script> * // 第二个参数可以指定前面引入的主题 * var chart = echarts.init(document.getElementById('main'), 'vintage'); * </script> */

使用：

var chart = echarts.init(document.getElementById('main'), null, { renderer: 'canvas'});

3.2 构造函数

构造函数里面是属性的初始化和zrender的初始化（this._zr）。

function ECharts(dom, theme, opts) { opts = opts || {}; if (typeof theme === 'string') { theme = themeStorage[theme]; } this.id; this.group; this._dom = dom; var zr = this._zr = zrender.init(dom, { renderer: opts.renderer || 'canvas', devicePixelRatio: opts.devicePixelRatio, width: opts.width, height: opts.height });//构造函数第三个参数使用的zrender处理的 this._throttledZrFlush = throttle.throttle(zrUtil.bind(zr.flush, zr), 17); this._theme = zrUtil.clone(theme); this._chartsViews = [];//存储所有的charts，为后面便利该变量渲染之 this._chartsMap = {}; this._componentsViews = [];//存储配置项组件的属性，为后面便利该变量渲染之 this._componentsMap = {}; this._api = new ExtensionAPI(this); //this._api是有'getDom', 'getZr', 'getWidth', 'getHeight', 'dispatchAction', 'isDisposed', //'on', 'off', 'getDataURL', 'getConnectedDataURL', 'getModel', 'getOption'方法的对象 this._coordSysMgr = new CoordinateSystemManager(); Eventful.call(this); this._messageCenter = new MessageCenter(); this._initEvents();//初始化鼠标事件 this.resize = zrUtil.bind(this.resize, this); this._pendingActions = []; function prioritySortFunc(a, b) { return a.prio - b.prio; } timsort(visualFuncs, prioritySortFunc); timsort(dataProcessorFuncs, prioritySortFunc); zr.animation.on('frame', this._onframe, this); }

3.3 setOption

首先我们来看下使用api的情况，我们在前面已经说过使用init方法初始化echarts了，接下来只需要配置option就可以得到渲染的图表。例子中有很多省略，完整的例子代码戳我。

chart.setOption({ backgroundColor: '#eee', title: { text: '我是柱状图', padding: 20 }, legend: { inactiveColor: '#abc', borderWidth: 1, data: [{name: 'bar'}, 'bar2', '\n', 'bar3', 'bar4'], align: 'left', tooltip: {show: true } }, toolbox: { top: 25, feature: { magicType: { type: ['line', 'bar', 'stack', 'tiled']}, dataView: {}, saveAsImage: {pixelRatio: 2} }, iconStyle: { emphasis: {textPosition: 'top'} } }, tooltip: {}, xAxis: { //... }, yAxis: { //... }, series: [{ name: 'bar', type: 'bar', stack: 'one', itemStyle: itemStyle, data: data1 }, { name: 'bar2', type: 'bar', stack: 'one', itemStyle: itemStyle, data: data2 }, { //... ... }, { //... ... }] });

源码的主要部分列下来：

/** * @param {Object} option 配置项 * @param {boolean} notMerge 可选，是否不跟之前设置的option进行合并，默认为false，即合并。 * @param {boolean} [lazyUpdate=false] Useful when setOption frequently. * //可选，在设置完option后是否不立即更新图表，默认为false，即立即更新 */ echartsProto.setOption = function(option, notMerge, lazyUpdate) { this[IN_MAIN_PROCESS] = true; if (!this._model || notMerge) { //不和之前的option合并 var optionManager = new OptionManager(this._api); //option配置管理 var theme = this._theme; var ecModel = this._model = new GlobalModel(null, null, theme, optionManager); ecModel.init(null, null, theme, optionManager); //不合并的时候会重绘，option为最后一次使用setOption方法的参数 } this.__lastOnlyGraphic = !!(option && option.graphic); //是否设置了graphic属性 //graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, //ring, polygon, polyline, rect, line, bezierCurve, arc, group, //http://echarts.baidu.com/option.html#graphic zrUtil.each(option, function(o, mainType) { mainType !== 'graphic' && (this.__lastOnlyGraphic = false); }, this); //setOption之前先执行的函数列表optionPreprocessorFuncs this._model.setOption(option, optionPreprocessorFuncs); if (lazyUpdate) { //为true，不立刻更新 this[OPTION_UPDATED] = true; } else { updateMethods.prepareAndUpdate.call(this); //准备更新 // Ensure zr refresh sychronously, and then pixel in canvas can be // fetched after `setOption`. this._zr.flush(); //调用zrender中的方法，立即刷新 this[OPTION_UPDATED] = false; } this[IN_MAIN_PROCESS] = false; flushPendingActions.call(this, false); };

说明： 这里setOption调用的顺序是这样的echarts.setOption==>GlobalModel.setOption(GlobalModel.js)==>OptionManager.setOption(OptionMManager.js)

其中有两个关键的方法：prepareAndUpdate和flush,分别用来准备刷新和刷新，渲染图表，下面我们来一步一步看prepareAndUpdate方法。

3.4 doRender方法

接着上面的prepareAndUpdate方法看准备渲染图表视图的执行顺序：updateMethods.prepareAndUpdate==>updateMethods.update==>doRender==>render。 在doRneder函数中渲染所有components和charts,render方法分别对应在各个components和charts中有具体的实现。

function doRender(ecModel, payload) { var api = this._api; // Render all components 渲染所有的配置组件,例如title,grid,toolbox,tooltip等 each(this._componentsViews, function(componentView) { var componentModel = componentView.__model; console.info("componentModel:", componentModel); componentView.render(componentModel, ecModel, api, payload); //在componentModal文件夹下调用相应的render方法 updateZ(componentModel, componentView); }, this); each(this._chartsViews, function(chart) { chart.__alive = false; }, this); // Render all charts 渲染所有的charts ecModel.eachSeries(function(seriesModel, idx) { var chartView = this._chartsMap[seriesModel.__viewId]; //this._chartsMap chartView.__alive = true; chartView.render(seriesModel, ecModel, api, payload); chartView.group.silent = !!seriesModel.get('silent'); updateZ(seriesModel, chartView); updateProgressiveAndBlend(seriesModel, chartView); }, this); // If use hover layer 如果使用hover，更新hover层 updateHoverLayerStatus(this._zr, ecModel); each(this._chartsViews, function(chart) { if (!chart.__alive) { chart.remove(ecModel, api); } }, this); }

4.关于option的处理

3.3部分已经说过使用setOption处理配置项options，这里介绍下源码里面是怎样管理配置项的。主要源码在echarts/model/Model（以下简称Model），echarts/model/Global（以下简称GlobalModel，继承Model），echarts/model/OptionManager（以下简称OptionManager）

this._model.setOption(option, optionPreprocessorFuncs);

注意这里面有个对象this._model用来存储配置项options的。

Model模块是一些基本的方法，主要的方法就是get,getModel通过options的对象名获取对象值。还混合了lineStyle，areaStyle，textStyle,itemStyle方法用来管理与线，文本，项目有关的options属性。

GlobalModel继承Model，暴露Model的方法，再封装一些自己独有的方法。

OptionManager是用来管理options配置项的，有重要的setOption方法，mergeOption方法(私有方法，合并options），parseRawOption方法（私有方法，解析options）

5.component组件和charts图表

component组件和charts图表均有render方法，这是我们来重点探究的方法。

5.1 component组件

component组件和配置项的属性一一对应，对于复杂点的配置项，组件文件夹下的管理方式是按照MVC方式的，如legend文件夹下有基本的LegendModel.js(M),LegendView(V),LegendAction(C)，与其他的组件一样，还可能有其他的一些js文件。

先看一个比较简单的例子，如title.js,我们来分析下它的render方法。 - 首先是使用extendComponentModel，相当于Model层，用来配置一些默认的配置项（有的复杂点的会把这些单独拆分开一个Model文件）。 - 然后是extendComponentView,相当于View层，render方法就在其中（有的复杂点的会把这些单独拆分开一个View文件）。

在render方法中首先当然是获取到配置options对象的内容。通过titleModel.getModel（path）（每个组件都会有一个对应的Model名称）获取对应的属性path。 然后调用new graphic.Text()去调用zrender里面的方法，渲染到canvas上，具体的实现参考上面给出的zrender源码分析内容。

5.2 charts图表

在charts文件夹下是各种类型的图表，包含line，bar，pie，map等,每种类型的文件夹下都有下面的几个文件结尾的js文件。 + **Series.js 继承src/modal/series.js中的基础方法，用来管理配置中的series属性，还提供一些默认的配置defaultOption; + **Veiw.js 继承至src/view/Chart.js（这里面相当于接口，没有具体实现方法），主要方法是render,渲染视图 render方法调用的是zrender.js中的内容，如lineView.js调用的是new graphic.Rect.

6.事件

示例中的使用：

chart.on('click', function(params) { console.log(params); });

关键源码：

function createRegisterEventWithLowercaseName(method) { return function (eventName, handler, context) { // Event name is all lowercase eventName = eventName && eventName.toLowerCase(); Eventful.prototype[method].call(this, eventName, handler, context); }; } echartsProto.on = createRegisterEventWithLowercaseName('on'); echartsProto.off = createRegisterEventWithLowercaseName('off'); echartsProto.one = createRegisterEventWithLowercaseName('one');

Eventful使用的是zrender中的（zrender/mixin/Eventful），是事件扩展，包括on,off,one,trigger等方法。

我们知道canvas API没有提供监听每个元素的机制，这就需要一些处理。处理的思路是：监听事件的作用坐标（如点击时候的坐标），判断在哪个绘制元素的范围中，如果在某个元素中，这个元素就监听该事件。具体的思路可以查看HTML5 Canvas绘制的图形的事件处理。

参考阅读： - echarts 3中文官网 - echarts 3 github网址 - ECharts 3.0底层zrender 3.x源码分析1-总体架构 - ECharts 3.0底层zrender 3.x源码分析2-Painter（V层） - ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）