這篇文章談及到的問題： 關(guān)于ECharts圖表的實(shí)例化方式和Highcharts圖表的實(shí)例化方法有些類似，都是通過給其對(duì)象提供一個(gè)option，option的結(jié)構(gòu)如同json的結(jié)構(gòu)一樣，只是一些屬性少了雙引號(hào)罷了。 縱觀ECharts圖表實(shí)例化的API，主要有一下幾個(gè)相關(guān)的實(shí)例化方法： 1、setOption(Object option,{boolean = true} notMerge)...
前面我們以及提及到了ECharts圖表組件初級(jí)入門之(一)：如何將ECharts引入至項(xiàng)目中的幾種方式和ECharts圖表初級(jí)入門(二)：ECharts圖表對(duì)象的初始化(init)詳解以及注意事項(xiàng)，我們完成了ECharts圖表使用的一些基礎(chǔ)部署了，也拿到了ECharts的對(duì)象，通過init(dom)方法，那么我們?nèi)绾谓o這個(gè)對(duì)象進(jìn)行數(shù)據(jù)初始化呢？這將會(huì)是這一篇文章將會(huì)談及到的問題：
關(guān)于ECharts圖表的實(shí)例化方式和Highcharts圖表的實(shí)例化方法有些類似，都是通過給其對(duì)象提供一個(gè)option，option的結(jié)構(gòu)如同json的結(jié)構(gòu)一樣，只是一些屬性少了雙引號(hào)罷了。
縱觀ECharts圖表實(shí)例化的API，主要有一下幾個(gè)相關(guān)的實(shí)例化方法：
1、setOption(Object option,{boolean = true} notMerge)
參數(shù)：
1）、Object類型的參數(shù) option，表示圖表數(shù)據(jù)結(jié)構(gòu) ，形如：
var option = {`
title: {
text: "我的第一個(gè)ECharts圖表示例"
},
tooltip: {`
trigger: 'axis'
}
};
2）、boolean notMerge，表示是否合并option。默認(rèn)為false，可以不設(shè)置。
描述：
萬能接口，配置圖表實(shí)例任何可配置選項(xiàng)（詳見option），多次調(diào)用時(shí)option選項(xiàng)是默認(rèn)是合并（merge）的，如果不需求，可以通過notMerger參數(shù)為true阻止與上次option的合并。
2、getOption()
描述：
返回內(nèi)部持有的當(dāng)前顯示option克隆
3、setSeries(Array series,{boolean=}notMerge)
參數(shù)：
1）、Array類型的series序列數(shù)據(jù)，形如：
var Array seriesList =new Array();
var seriesObj =new seriesObj();
seriesObj.name ="蒸發(fā)量"``;
seriesObj.type ="line";
seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
//設(shè)置series
myChart.setSeries(seriesList,false);
2）、boolean notMerge 表示是否合并series，默認(rèn)為false，可以不設(shè)置。
描述：
數(shù)據(jù)接口，驅(qū)動(dòng)圖表生成的數(shù)據(jù)內(nèi)容，效果等同調(diào)用setOption({series:{...}})
4、getSeries()
描述：
返回內(nèi)部持有的當(dāng)前顯示series克隆，效果同return getOption().series
5、addData(....)
參數(shù)：
1）、單組數(shù)據(jù)參數(shù)
11）、{number} seriesIdx ：表示給哪一條series添加數(shù)據(jù)，series腳標(biāo)從0開始；
12）、{number | Object} data；
13）、{boolean=} isHead ；
14）、{boolean=} dataGrow；
15）、{string=} additionData；
2）、多組數(shù)據(jù)參數(shù)
其實(shí)就是多個(gè)單組數(shù)據(jù)的形成的集合或者數(shù)組{Array} params
描述：
動(dòng)態(tài)數(shù)據(jù)接口
seriesIdx 系列索引
data 增加數(shù)據(jù)
isHead 是否隊(duì)頭加入，默認(rèn)，不指定或false時(shí)為隊(duì)尾插入
dataGrow 是否增長(zhǎng)數(shù)據(jù)隊(duì)列長(zhǎng)度，默認(rèn)，不指定或false時(shí)移出目標(biāo)數(shù)組對(duì)位數(shù)據(jù)
additionData 是否增加類目軸(餅圖為圖例)數(shù)據(jù)，附加操作同isHead和dataGrow
多組數(shù)據(jù)添加時(shí)參數(shù)為：
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
**6、on(string eventName,function eventListner)**
描述：
事件綁定，支持事件有：REFRESH，RESTORE，CLICK，HOVER，DATA_CHANGED，MAGIC_TYPE_CHANGED，DATA_VIEW_CHANGED，DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED，MAP_SELECTED
示例代碼形如：
//ECharts圖表的click事件監(jiān)聽
myChart.on("click", function () {
alert("你點(diǎn)擊我了!");
});
7、un(string eventName,function eventListner)
描述：
解除某個(gè)事件的綁定，示例代碼形如：
myChart.un("click", function() {
alert("悲劇，你注銷我了!");
});
8、showLoading(Object loadingOption)
描述：
過渡控制（詳見loadingOption），顯示loading（讀取中）代碼片段形如：
//圖表顯示提示信息
myChart.showLoading({
text:` `"圖表數(shù)據(jù)正在努力加載...",
x:"center",
y:"center",
textStyle: {
color:``"red",
fontSize:14
},
effect:"spin"
});
注意：
9、hideLoading()
描述：
隱藏圖表數(shù)據(jù)加載過度提示信息，示例代碼：
myChart.hideLoading();
10、getZrender()
描述：
獲取當(dāng)前圖表所用ZRender實(shí)例，可用于添加額外圖形或進(jìn)行深度定制，zrender接口詳見ZRender 示例代碼如下所示：
nyChart.getZrender();
11、getDataURL(string imgType)
描述：
獲取當(dāng)前圖表的Base64圖片dataURL，imgType 圖片類型，支持png|jpeg，默認(rèn)為png
示例代碼如下所示：
var imgUrl = myChart.getDataURL("png");
12、getImage(string imgType)
描述：
獲取一個(gè)當(dāng)前圖表的img，imgType 圖片類型，支持png|jpeg，默認(rèn)為png，示例代碼片段：
`//前端導(dǎo)出圖表圖片`
var imgObj = myChart.getImage("jpeg");
主要是拿到一個(gè)圖片對(duì)象，然后獲取其outerHTML屬性就是一個(gè)圖表image的html完整標(biāo)簽，我們可以使用其直接顯示在頁(yè)面上。
13、resize()
描述：
ECharts沒有綁定resize事件，顯示區(qū)域大小發(fā)生改變內(nèi)部并不知道，
使用方可以根據(jù)自己的需求綁定關(guān)心的事件，主動(dòng)調(diào)用resize達(dá)到區(qū)域更新的效果。
myChart.resize();
14、refresh()
描述：
刷新圖表，圖例選擇、數(shù)據(jù)區(qū)域縮放，拖拽狀態(tài)均保持。
myChart.refresh();
15、restore()
描述：
還原圖表，各種狀態(tài)均被清除，還原為最初展現(xiàn)時(shí)的狀態(tài)。
16、clear()
描述：
清空繪畫內(nèi)容，清空后實(shí)例可用，因?yàn)椴⒎轻尫攀纠馁Y源，釋放資源我們需要dispose()
myChart.clear();
17、dispose()
描述：
釋放圖表實(shí)例，釋放后實(shí)例不再可用。
myChart.dispose();
目前ECharts圖表的實(shí)例化主要包含當(dāng)前十七個(gè)相關(guān)方法，后期不保證有補(bǔ)充的節(jié)奏，就目前來說，這十七個(gè)已經(jīng)夠用了的。
注意：
1、以上方法的使用前提都是需要獲得ECharts初始化對(duì)象過后才可以進(jìn)行，否則會(huì)產(chǎn)生報(bào)錯(cuò)現(xiàn)象。
