echart柱子太短无法点击问题

最新推荐文章于 2023-11-10 09:23:51 发布

原创最新推荐文章于 2023-11-10 09:23:51 发布 · 6.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

收录于

echarts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍在ECharts柱图中，如何优化点击事件以提高交互体验，特别是在数据稀疏区域。通过使用myChart.getZr().on('click')替代常规的点击事件，并结合tooltip formatter的使用，确保即使在数据点较小的情况下也能准确触发点击事件。

在做echarts柱图的时候，有时候可能会有下转或者一些点击功能，一般会使用myChart.on('click',function(){//执行代码})去实现功能，但是，有的时候，会出现某个柱子数据太少，可能会点不到，这是可以使用myChart.getZr().on('click',function(){})去代替之前的点击事件，如下：

myChart.getZr().on('click', function (p) {
   const pointInPixel = [p.offsetX, p.offsetY];
   if (myChart.containPixel('grid', pointInPixel)) {
     //执行代码
     console.log($this.tacitly.parma[0])
   }
});
这种事件需要配合tooltip中的farmater一起使用，在option中加入如下代码：
tooltip: {
       trigger: 'axis',
      formatter: function (p) {
          $this.tacitly.parma = p 
     }
},
这里的‘$this.tacitly.parma’是我自己在全局定义的变量，可根据实际定义