在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 中地圖區域選中後的事件（使用geoselectchanged））。

13）geounselected：geo 中地圖區域取消選中後的事件，使用geoselectchanged）。

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

15）pieselected：series-pie 中餅圖扇形選中後的事件，使用pieselectchanged）。

16）pieunselected：series-pie 中餅圖扇形取消選中後的事件，使用pieselectchanged）。

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

18）mapselected：series-map 中地圖區域選中後的事件，使用mapselectchanged）。

19）mapunselected：series-map 中地圖區域取消選中後的事件，使用mapselectchanged）。

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

當進行坐標軸範圍選取時，可以用如下方式獲取當前高亮的線所對應的 data indices （即 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);
});

// 數據區域縮放後事件
myChart.on(‘datazoom‘, function (params) {
    var opt = myChart.getOption();
    var dz = opt.dataZoom[0];
    var tstart = opt.xAxis[0].data[dz.startValue];
    var tend = opt.xAxis[0].data[dz.endValue];
    console.log("S=" + tstart);
    console.log("E=" + tend);
});

// 重置事件
myChart.on(‘restore‘, function (params) {
    console.log("restore");
});

原文出處： http://blog.csdn.net/a82793510/article/details/51756272

【轉】ECharts3.x中的點擊事件與行為