Simple introduction to initialization of echarts functions

Initialization of the Echarts

1, Echarts.init

Self.init = function (dom, theme) {var Zrender = require (' Zrender '); if (Zrender.version.replace ('. ', ')-0 < Self.dependencies.zrender.replace ('. ', ')-0) {Console.error (' Zrender ' + zrender.version + ' is too old for echarts ' + self.version + '.        Current version need Zrender ' + self.dependencies.zrender + ' + '); } dom = Dom instanceof Array? DOM[0]: dom;//If a set of IDs is the same, the first var key = Dom.getattribute (Dom_attribute_key) will be taken;//comment by Danielinbiti here you can see Adds a property to the DOM node, which defines the key.            This key cannot be changed after the definition, otherwise instances cannot destroy if (!key) {key = _idbase++;        Dom.setattribute (Dom_attribute_key, KEY);        } if (_instances[key]) {_instances[key].dispose ();        } _instances[key] = new Echarts (DOM);//The event listener is done here, the component property is initialized, and the DOM is recorded as a global variable.        _instances[key].id = key;        _instances[key].canvassupported = _canvassupported;        _instances[key].settheme (theme);    return _instances[key]; };

From this code to the main definition of echarts, it is useful to note that if a page, different DOM if they define the key, it will be different, otherwise it will be overwritten. In fact, Init is just new echarts.

2, echarts.setOption:function (option, Notmerge)

This is true for graphical initialization, where option is the common parameter and data set object. Whether the Notmerge is merged, and if it is merged, the option information is merged into the original information. For series, note that if it is a new series, the array latitude cannot overlap the original, otherwise it is considered to be merged. such as the Old Series:[{a},{b}], the new Series:[{1}], the A and 1 will merge attributes, and take the union.

3, the core of the initialization method is _render

_render:function (magicoption) {//commend by Danielinbiti THIS._MERGEGLOBALCONIFG (magicoption);            if (This._nodatacheck (magicoption)) {return;            } var bgColor = Magicoption.backgroundcolor;                    if (BgColor) {//Set Basemap background color, that is, DOM node background color if (!_canvassupported && bgcolor.indexof (' rgba ') =-1) {                    var cList = Bgcolor.split (', ');                    This.dom.style.filter = ' alpha ' (opacity= ' + clist[3].substring (0, Clist[3].lastindexof (') ')) * 100 + ') ';                    Clist.length = 3;                    Clist[0] = clist[0].replace (' A ', ');                This.dom.style.backgroundColor = Clist.join (', ') + ') ';                } else {this.dom.style.backgroundColor = BgColor;            }} this._zr.clearanimation ();            This._chartlist = [];            var chartlibrary = require ('./chart '); var componentlibrary = require ('./component '); if (Magicoption.xaxis | | magicoption.yaxis) {magicoption.grid = Magicoption.grid | | {};//have x and y axes, need to have grid,grid is rectangular grid magicoption.datazoom = Magicoption.datazoom | |            {};                } var componentlist = [//All objects are here.]                ' title ',//title ' legend ',//Legend ' tooltip ',//hint ' datarange ',//data range  ' Roamcontroller ',//Map roaming component ' grid ',//grid grid ' datazoom ',//Zoom Out ' Xaxis ',            X-axis ' YAxis ',//y axis ' polar '//radar];            var Componentclass;            var ComponentType;            var component;                for (var i = 0, L = componentlist.length; i < L; i++) {//based on the definitions above, find all objects and put them in this.component, which is directly accessible outside the page.                ComponentType = Componentlist[i];                component = This.component[componenttype]; if (Magicoption[componenttype]) {if (component) {Component.refresh && Component.refresh (magicoption); } else {componentclass = Componentlibrary.get (/^[xy]axis$/.test (componenttype)?                        ' axis ': componenttype);                        component = new Componentclass (This._themeconfig, This._messagecenter, THIS._ZR, Magicoption, this, componenttype);                    This.component[componenttype] = component;                } this._chartlist.push (component);                    } else if (component) {component.dispose ();                    This.component[componenttype] = null;                Delete This.component[componenttype];            }} var Chartclass;            var ChartType;            var chart;            var chartmap = {}; for (var i = 0, L = magicOption.series.length; i < L; i++) {//Loop series, initialize chart, this method is core ChartType = Magicop Tion.series[i].Type if (!charttype) {//does not have an icon type, the component is not initialized, but like the legend, when using series data, this is not judged, so you can put some extra properties alone a series console.error (' SE                    ries[' + i + '] chart type have not been defined. ');                Continue                    } if (!chartmap[charttype]) {Chartmap[charttype] = true; Chartclass = Chartlibrary.get (ChartType);//Gets the graphics class, such as Bar if (Chartclass) {if (thi                            S.chart[charttype]) {chart = This.chart[charttype];                        Chart.refresh (magicoption); } else {chart = new Chartclass (This._themeconfig, This._messagecenter, THIS._ZR, Magicoption,                        this);//initialization, series are passed in, the interior is judged whether there are multiple bar or line, so that is this.chart in the graph has only one object.                        } this._chartlist.push (chart);                    This.chart[charttype] = chart;              } else {          Console.error (ChartType + ' have not been required. '); }}} for (ChartType in This.chart) {if (ChartType! = Ecconfig.chart_                    Type_island &&!chartmap[charttype]) {this.chart[charttype].dispose ();                    This.chart[charttype] = null;                Delete This.chart[charttype];            }} This.component.grid && This.component.grid.refixAxisShape (this.component);            This._island.refresh (magicoption); This._toolbox.refresh (magicoption);//Initialize the ToolTip magicoption.animation &&!magicoption.renderasimage?            This._zr.refresh (): This._zr.render ();            var imgid = ' IMG ' + this.id;            var img = document.getElementById (imgid); if (magicoption.renderasimage && _canvassupported) {if (img) {img.src = THIS.G Etdataurl (Magicoption.renderasImage);                    } else {img = this.getimage (magicoption.renderasimage);                    Img.id = Imgid;                    img.style.position = ' absolute ';                    Img.style.left = 0;                    img.style.top = 0;                This.dom.firstChild.appendChild (IMG);                } this.un ();                This._zr.un ();                This._disposechartlist ();            This._zr.clear ();            } else if (img) {img.parentNode.removeChild (IMG);            } img = null;        This._option = magicoption; },

Summarize:

The above 3 methods are the process of initialization, in general, there is a drawing first, and then the row is initialized by SetOption. So the modification of parameters also means that the whole graph is refreshed instead of individual graphics. In addition, many property settings are supported in three ways: string, function, parameter placeholder display. This is still very flexible.

Simple introduction to initialization of echarts functions