echarts函数初始化简单介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;//如果是一组id相同的，则会取第一个
var key = dom.getAttribute(DOM_ATTRIBUTE_KEY);//comment by danielinbiti这里可以看出，自己可以对dom节点增加属性，从而定义key。定义后这个key不能改，不然instances无法销毁
if (!key) {
key = _idBase++;
dom.setAttribute(DOM_ATTRIBUTE_KEY, key);
}
if (_instances[key]) {
_instances[key].dispose();
}
_instances[key] = new Echarts(dom);//这里做了事件监听，组件属性初始化，记录dom成全局变量。
_instances[key].id = key;
_instances[key].canvasSupported = _canvasSupported;
_instances[key].setTheme(theme);
return _instances[key];
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
_render: function (magicOption) {//commend by danielinbiti
this._mergeGlobalConifg(magicOption);
if (this._noDataCheck(magicOption)) {
return;
}
var bgColor = magicOption.backgroundColor;
if (bgColor) {//设置底图背景色，也就是DOM节点的背景色
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 || {};//有x和y轴的，需有grid，grid就是长方形网格
magicOption.dataZoom = magicOption.dataZoom || {};
}
var componentList = [//所有的对象都在这里了。
'title',
//标题
'legend', //图例
'tooltip', //提示
'dataRange', //数据区间
'roamController',//地图漫游组件
'grid',
//grid网格
'dataZoom',//放大缩小
'xAxis',
//x轴
'yAxis', //y轴
'polar'//雷达
];
var ComponentClass;
var componentType;
var component;
for (var i = 0, l = componentList.length; i < l; i++) {//根据上面定义，查找所有对象，放到this.component中，这在页面外面是能直接访问到的
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++) {//循环series，初始化图表,这段方法是核心
chartType = magicOption.series[i].type;
if (!chartType) {//没有图标类型，就不初始化组件，但像图例之类的，在使用series数据时，不对这个进行判断，所以可以把一些额外属性单独一个series
console.error('series[' + i + '] chart type has not been defined.');
continue;
}
if (!chartMap[chartType]) {
chartMap[chartType] = true;
ChartClass = chartLibrary.get(chartType);//获取图形类，比如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);//初始化，series都传了进去，内部又进行判断是否有多个bar或者line，所以也就是说this.chart中没中图形都只有一个对象。
}
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);//初始化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;
},