echarts如何控制点击事件触发区域
假如使用echarts显示柱状图时,如果图形数据悬殊比较大,就会出现某些柱形比较长,有些会非常短。那么短的部分会比较难点击。
这时候,可以使用echarts提供的getZr
来获取点击区域的位置,然后使用convertFromPixel
转换当前位置对应的x轴索引或y轴索引。
this.myChart.getZr().on('click', ({ offsetX, offsetY }) => {
const pointInPixel = [offsetX, offsetY];
if (this.myChart.containPixel('grid', pointInPixel)) {
const [, yIndex] = this.myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
// 逻辑代码
}
});
使用上述的这种方式,就可以精准的获取对应的点击位置,实现扩大点击区域的目的。
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=2344