1. 鼠標事件支持方法

ECharts 支持常規(guī)的鼠標事件類型，包括 ‘click’、 ‘dblclick’、 ‘mousedown’、 ‘mousemove’、 ‘mouseup’、 ‘mouseover’、 ‘mouseout’、 ‘globalout’、 ‘contextmenu’ 事件

2. 簡單實例

// 基于準備好的dom，初始化ECharts實例
let myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據(jù)
var option = {xAxis: {data: ['淘寶', '京東', 'PDD', 'facexxx', 'baidu', '360']},yAxis: {},series: [{name: '訪問量',type: 'bar',data: [50, 27, 76, 30, 12, 10]}]
};
myChart.setOption(option);
// 處理點擊事件 （此處監(jiān)聽 click 鼠標單擊事件）
myChart.on('click', function(params) {console.log('params',params)
});

3. 鼠標事件參數(shù)詳細

type EventParams = {
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 ‘series’、‘markLine’、‘markPoint’、‘timeLine’ 等。
componentType: string;
// 系列類型。值可能為：‘line’、‘bar’、‘pie’ 等。當 componentType 為 ‘series’ 時有意義。
seriesType: string;
// 系列在傳入的 option.series 中的 index。當 componentType 為 ‘series’ 時有意義。
seriesIndex: number;
// 系列名稱。當 componentType 為 ‘series’ 時有意義。
seriesName: string;
// 數(shù)據(jù)名，類目名
name: string;
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number;
// 傳入的原始數(shù)據(jù)項
data: Object;
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 ‘node’ 或者 ‘edge’，表示當前點擊在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data，dataType 無意義。
dataType: string;
// 傳入的數(shù)據(jù)值
value: number | Array;
// 數(shù)據(jù)圖形的顏色。當 componentType 為 ‘series’ 時有意義。
color: string;
};

4. 區(qū)分鼠標點擊位置

params.componentType （具體參照上面圖例）

5. 如何只對指定的組件的圖形元素的觸發(fā)點擊回調(diào)

chart.on(eventName, query, handler);
使用 query 來指定圖形元素

6. query詳解

query類型 string || Object
string 表示組件類型
Object 表示屬性對象：
｛
${mainType}Index: number // 組件 index
${mainType}Name: string // 組件 name
${mainType}Id: string // 組件 id
dataIndex: number // 數(shù)據(jù)項 index
name: string // 數(shù)據(jù)項 name
dataType: string // 數(shù)據(jù)項 type，如關(guān)系圖中的 ‘node’, ‘edge’
element: string // 自定義系列中的 el 的 name
}

7. 相關(guān)鏈接
   鏈接: echarts事件與行為