Brief Introduction to echarts function initialization and brief introduction to echarts

Brief Introduction to echarts function initialization and brief introduction to echarts

ECharts Initialization

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 the IDs of a group are the same, the first var key = dom is obtained. getAttribute (DOM_ATTRIBUTE_KEY); // comment by danielinbiti we can see that you can add attributes to the dom node to define the key. This key cannot be changed after definition, or instances cannot destroy if (! Key) {key = _ idBase ++; dom. setAttribute (DOM_ATTRIBUTE_KEY, key);} if (_ instances [key]) {_ instances [key]. dispose () ;}_ instances [key] = new Echarts (dom); // event listening is performed here, component attributes are initialized, and dom is recorded as a global variable. _ Instances [key]. id = key; _ instances [key]. canvasSupported = _ canvasSupported; _ instances [key]. setTheme (theme); return _ instances [key];};

In this Code, we mainly define Echarts. This is useful. If different dom on a web page defines the key, it will be different. Otherwise, it will be overwritten. In fact, init is just a new Echarts.

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

This is a real image initialization, where option is a common parameter and data setting object. Whether or not notMerge is merged. If it is merged, the option information will be merged into the original information. Note that for series, if it is a new series, the array latitude cannot overlap with the original, otherwise it will be considered merged. For example, if the old series: [{a}, {B}], and the new series: [{1}], then a and 1 combine attributes and take the Union set.

3. The core initialization method is _ render.

_ Render: function (magicOption) {// commend by danielinbiti this. _ mergeGlobalConifg (magicOption); if (this. _ noDataCheck (magicOption) {return;} var bgColor = magicOption. backgroundColor; if (bgColor) {// sets the basemap background color, that is, the background color of the DOM node 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'); v Ar componentLibrary = require ('. /component '); if (magicOption. xAxis | magicOption. yAxis) {magicOption. grid = magicOption. grid | {}; // If x and Y axes exist, a grid is required. A grid is a rectangular grid magicOption. dataZoom = magicOption. dataZoom | |{};} var componentList = [// all objects are here. 'Title', // The title 'legend', // legend 'tooltip ', // The system prompts 'datarange', // The data range 'roamcontroller ', // map roaming component 'grid', // grid 'datazoom ', // zoom in and 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 ++) {// according to the above definition, search for all objects and place them in this. in component, this Is The componentType = componentList [I]; component = this. component [componentTyp E]; 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 ++) {// cycle series, initialize the chart, this method is the core chartType = magicOption. series [I]. type; if (! ChartType) {// if there is no icon type, the component is not initialized. However, for example, if a legend is used for series data, this parameter is not determined, therefore, you can separate some additional attributes into a series console. error ('series ['+ I +'] chart type has not been defined. '); continue;} if (! ChartMap [chartType]) {chartMap [chartType] = true; ChartClass = chartLibrary. get (chartType); // obtain the graphics class, such as bar if (ChartClass) {if (this. chart [chartType]) {chart = this. chart [chartType]; chart. refresh (magicOption);} else {chart = new ChartClass (this. _ themeConfig, this. _ messageCenter, this. _ zr, magicOption, this); // initialization, the series is passed in, and the internal judge whether there are multiple bar or line, so that is to say this. no graph in the chart has only one object.} This. _ chartList. push (chart); this. chart [chartType] = chart;} else {console. error (chartType + 'has 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 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. getDataURL (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 ;},

Summary:

The above three methods are the initialization process. In general, there is a drawing first, and then the graph row is initialized through setOption. Therefore, parameter modification also means refreshing the entire image, rather than refreshing individual images. In addition, many attribute settings support three methods: String, function, and parameter placeholder display. This is flexible.