echarts点击柱状图阴影触发事件

最新推荐文章于 2024-09-06 10:08:11 发布

Shinebone

最新推荐文章于 2024-09-06 10:08:11 发布

阅读量2.9k

点赞数

文章标签： java js python javascript android

本文链接：https://blog.csdn.net/Shinebone/article/details/121299536

版权

假如使用echarts显示柱状图时，如果图形数据悬殊比较大，就会出现某些柱形比较长，有些会非常短。那么短的部分会比较难点击。

这时候，可以使用echarts提供的getZr来获取点击区域的位置，然后使用convertFromPixel转换当前位置对应的x轴索引或y轴索引。

this.myChart.getZr().off('click')  //最好加上

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);
    // 逻辑代码
  }
});