ECharts 源码解读 三

2021SC@SDUSC

SetOption

前面已经用init方法初始化过echarts，接下来只需配置option即可。

setOption调用顺序为：

echarts.setOption->GlobalModel.setOption(GlobalModel.js)->OptionManager.setOption(OptionManager.js)

源码主要部分如下

/**
 * @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);
};

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

doRender方法

准备渲染图表视图的执行顺序：

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);
}

处理配置项Options

主要源码在echarts/model/Model（以下简称Model），echarts/model/Global（以下简称GlobalModel，继承Model），echarts/model/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）