在 ECharts 的圖表中用戶的操作將會觸發相應的事件。開發者可以監聽這些事件，然后通過回調函數做相應的處理，比如跳轉到一個地址，或者彈出對話框，或者做數據下鑽等等。
如下是一個綁定點擊操作的示例。
myChart.on('click', function (params) { // 控制台打印數據的名稱 console.log(params.name); });
在 ECharts 中事件分為兩種類型，一種是用戶鼠標操作點擊，或者 hover 圖表的圖形時觸發的事件，
還有一種是用戶在使用可以交互的組件后觸發的行為事件，例如在切換圖例開關時觸發的 'legendselectchanged' 事件（這里需要注意切換圖例開關是不會觸發'legendselected'事件的），數據區域縮放時觸發的 'datazoom' 事件等等。
鼠標事件的處理
ECharts 支持常規的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。下面先來看一個簡單的點擊柱狀圖后打開相應的百度搜索頁面的示例。
// 基於准備好的dom，初始化ECharts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); // 處理點擊事件並且跳轉到相應的百度搜索頁面 myChart.on('click', function (params) { window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
//window.open('https://www.baidu.com/s?wd=' + params.name);
});所有的鼠標事件包含參數 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 }
如何區分鼠標點擊到了哪里：
myChart.on('click', function (params) { if (params.componentType === 'markPoint') { // 點擊到了 markPoint 上 if (params.seriesIndex === 5) { // 點擊到了 index 為 5 的 series 的 markPoint 上。 } } else if (params.componentType === 'series') { if (params.seriesType === 'graph') { if (params.dataType === 'edge') { // 點擊到了 graph 的 edge（邊）上。 } else { // 點擊到了 graph 的 node（節點）上。 } } } });
使用 query 只對指定的組件的圖形元素的觸發回調：
chart.on(eventName, query, handler);query可為string或者Object。
如果為string表示組件類型。格式可以是 'mainType' 或者 'mainType.subType'。例如：
chart.on('click', 'series', function () {...}); chart.on('click', 'series.line', function () {...}); chart.on('click', 'dataZoom', function () {...}); chart.on('click', 'xAxis.category', function () {...});
如果為Object，可以包含以下一個或多個屬性，每個屬性都是可選的：
{ <mainType>Index: number // 組件 index <mainType>Name: string // 組件 name <mainType>Id: string // 組件 id dataIndex: number // 數據項 index name: string // 數據項 name dataType: string // 數據項 type，如關系圖中的 'node', 'edge' element: string // 自定義系列中的 el 的 name }
例如：
chart.setOption({ // ... series: [{ name: 'uuu' // ... }] }); chart.on('mouseover', {seriesName: 'uuu'}, function () { // series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回調。 });
例如：
chart.setOption({ // ... series: [{ // ... }, { // ... data: [ {name: 'xx', value: 121}, {name: 'yy', value: 33} ] }] }); chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () { // series index 1 的系列中的 name 為 'xx' 的元素被 'mouseover' 時，此方法被回調。 });
例如：
chart.setOption({ // ... series: [{ type: 'graph', nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}], edges: [{source: 0, target: 1}] }] }); chart.on('click', {dataType: 'node'}, function () { // 關系圖的節點被點擊時此方法被回調。 }); chart.on('click', {dataType: 'edge'}, function () { // 關系圖的邊被點擊時此方法被回調。 });你可以在回調函數中獲得這個對象中的數據名、系列名稱后在自己的數據倉庫中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：
myChart.on('click', function (parmas) { $.get('detail?q=' + params.name, function (detail) { myChart.setOption({ series: [{ name: 'pie', // 通過餅圖表現單個柱子中的數據分布 data: [detail.data] }] }); }); });
組件交互的行為事件
在 ECharts 中基本上所有的組件交互行為都會觸發相應的事件，常用的事件和事件對應參數在 events 文檔中有列出。
下面是監聽一個圖例開關的示例：
// 圖例開關的行為只會觸發 legendselectchanged 事件 myChart.on('legendselectchanged', function (params) { // 獲取點擊圖例的選中狀態 var isSelected = params.selected[params.name]; // 在控制台中打印 console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name); // 打印所有圖例的狀態 console.log(params.selected); });
代碼觸發 ECharts 中組件的行為
上面提到諸如'legendselectchanged'事件會由組件交互的行為觸發，那除了用戶的交互操作，有時候也會有需要在程序里調用方法觸發圖表的行為，諸如顯示 tooltip，選中圖例。
在 ECharts 2.x 是通過 myChart.component.tooltip.showTip 這種形式調用相應的接口觸發圖表行為，入口很深，而且涉及到內部組件的組織。
相對地，在 ECharts 3 里改為通過調用 myChart.dispatchAction({ type: '' }) 觸發圖表行為，統一管理了所有動作，也可以方便地根據需要去記錄用戶的行為路徑。
ps：ECharts 中支持的圖表行為，通過 dispatchAction 觸發
常用的動作和動作對應參數在 action 文檔中有列出。
下面示例演示了如何通過dispatchAction去輪流高亮餅圖的每個扇形。
code：
option = {
title : {
text: '餅圖程序調用高亮示例',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
app.currentIndex = -1;
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的圖形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮當前圖形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 顯示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);