一. 普通点击事件
- 只有点击折线点或柱子等相应的地方才会触发click事件
-
myChart.on('click', function (params) { me.clickDailyChart(params.name); });
name: x轴的label
二. 精准点击事件
- 对整个图表的点击事件进行监听,通过点的坐标来找到数组下标,任何位置可触发点击事件
this.myChart.getZr().on('click', function (param) { const pointInPixel = [ param.offsetX, param.offsetY, ]; if (me.myChart.containPixel('grid', pointInPixel)) { const index = me.myChart.convertFromPixel({seriesIndex: 0}, pointInPixel)[0]; const op = myChart.getOption(); const name = op.xAxis[0].data[index ]; me.clickMyChart(param,index); } });
通过point得到点击的坐标点x和y。
三. 其他点击事件
- 图例点击事件
this.totalChart.on('legendselectchanged', legend => { me.clickTotalChart(legend); });
取消点击:
legend: { selectedMode:false,//取消图例上的点击事件 data:[] }
- 各种点击事件
四. 取消点击事件
myChart.getZr().off('click');
有时因为嵌套关系,点击事件会触发冒泡,会执行两次点击事件,在点击事件之前加一个off事件,避免点击时发生二次调用的问题。