echarts 圖的點擊事件(含:點擊重複觸發的問題及其解決方法)

要求:在echart圖表中,點擊每個項,需要跳轉對應頁面或者顯示對應的數據詳情列表。

如何添加鼠標點擊事件?

1.通常我們只使用了以下代碼,通過配置項和數據顯示圖表。

var myChart = echarts.init(document.getElementById('chartBox'));
var option = {...};
myChart.setOption(option);

2.在myChart.setOption(option)後添加以下代碼,即可觸發圖標中每個項的鼠標點擊事件。

myChart.on('click',  function(param) {
    //這個params可以獲取你要的圖中的當前點擊的項的參數
    console.dir(param)
});    

注:鼠標事件包括'click','dblclick','mousedown','mouseup','mouseover','mouseout','globalout','contextmenu'。

3.如果邏輯運行中,第2點中的代碼,執行了多次,則綁定之前需要清除綁定:

//防止重複觸發點擊事件
if(myChart._$handlers.click){
    myChart._$handlers.click.length = 0;
}
myChart.on('click',  function(params) {
    //這個params可以獲取你要的餅圖中的當前點擊的項的參數
    _this.showMapPointInfo(params,param);
});

更多鼠標事件詳情,直連官方文檔:

http://www.echartsjs.com/api.html#events.鼠標事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章