在ECharts中主要通過 on 方法新增事件處理函式，ECharts中的事件主要分為兩種，1）滑鼠事件，在滑鼠click  or  hove 時觸發滑鼠事件； 2）另外一種是在ECharts在做圖形互動時觸發的事件，即呼叫 dispatchAction  後觸發的事件。

滑鼠事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

myChart.on(‘click’,function(params){
    console.log(params);});

{
 
// 當前點選的圖形元素所屬的元件名稱，// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,// 系列型別。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
    seriesType: string,// 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
    seriesIndex: number,// 系列名稱。當 componentType 為 'series' 時有意義。
 

    seriesName: string,// 資料名，類目名
    name: string,// 資料在傳入的 data 陣列中的 index
    dataIndex: number,// 傳入的原始資料項
    data:Object,// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，// dataType 的值會是 'node' 或者 'edge'，表示當前點選在 node 還是 edge 上。// 其他大部分圖表中只有一種 data，dataType 無意義。
    dataType: string,// 傳入的資料值
    value: number
 
|Array// 資料圖形的顏色。當 componentType 為 'series' 時有意義。
    color: string
}

上面的點選事件引數，只是列出部分，不同的事件也有一些額外附加引數。

可以通過jq 的遍歷檢視他的引數屬性$.each(params, function(k,v){  console.log( ‘k=’+k+’:v=’ + v)  });

圖例互動事件：

1） legendselectchanged : 切換圖例選中狀態後的事件 (注：圖例元件使用者切換圖例開關會觸發該事件,不管你有沒有選擇，點選了就觸發)

2）legendselected：例元件用legendSelect 圖例選中後的事件，即點選顯示該圖例時，觸發就生效。

3）legendunselected： legendUnSelect 圖例取消選中後的事件。

4）datazoom：資料區域縮放後的事件。縮放視覺對映元件。

5）datarangeselected：selectDataRange 視覺對映元件中，range 值改變後觸發的事件。

6）timelinechanged：timelineChange 時間軸中的時間點改變後的事件。

7）timelineplaychanged：timelinePlayChange 時間軸中播放狀態的切換事件。

8）restore： restore 重置 option 事件。

9）dataviewchanged：工具欄中資料檢視的修改事件。

10）magictypechanged：工具欄中動態型別切換的切換事件。

11）geoselectchanged：geo 中地圖區域切換選中狀態的事件（使用者點選選中會觸發該事件。）。

12）geoselected：geo 中地圖區域選中後的事件（使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 geoselectchanged））。

13）geounselected：geo 中地圖區域取消選中後的事件，使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 geoselectchanged）。

14）pieselectchanged：series-pie 中餅圖扇形切換選中狀態的事件，使用者點選選中會觸發該事件。

15）pieselected：series-pie 中餅圖扇形選中後的事件，使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 pieselectchanged）。

16）pieunselected：series-pie 中餅圖扇形取消選中後的事件，使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 pieselectchanged）。

17）mapselectchanged： series-map 中地圖區域切換選中狀態的事件，使用者點選選中會觸發該事件。

18）mapselected：series-map 中地圖區域選中後的事件，使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 mapselectchanged）。

19）mapunselected：series-map 中地圖區域取消選中後的事件，使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 mapselectchanged）。

20）axisareaselected：平行座標軸 (Parallel) 範圍選取事件，

當進行座標軸範圍選取時，可以用如下方式獲取當前高亮的線所對應的 data indices （即 series 的 data 中的序號列表）。

chart.on('axisareaselected',function(){var series1 = chart.getModel().getSeries()[0];var series2 = chart.getModel().getSeries()[0];var indices1 = series1.getRawIndicesByActiveState('active');var indices2 = series2.getRawIndicesByActiveState('active');
    console.log(indices1);
    console.log(indices2);});