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.鼠标事件

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