echarts点击柱状图太小，和避免重复事件

最新推荐文章于 2023-12-06 09:56:15 发布

原创最新推荐文章于 2023-12-06 09:56:15 发布 · 562 阅读

0 ·

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

标签

#echarts #前端 #javascript

收录于

这篇博客介绍了如何在ECharts中处理柱状图的点击事件，通过解除并重新绑定click事件来确保事件的正确触发。在点击事件中，获取了点击位置对应的X轴序号和对应的数据，包括X轴的名称和Y轴的数值，为后续的数据操作或展示提供支持。

_this.chart.getZr().off()   //先解除click事件，避免重复事件

_this.chart.getZr().on('click',function (params) {
  //点击柱状图的整个区域生效方法
  var pointInPixel= [params.offsetX, params.offsetY];
  if (_this.chart.containPixel('grid',pointInPixel)) {
    /*此处添加具体执行代码*/
    var pointInGrid=_this.chart.convertFromPixel({seriesIndex:0},pointInPixel);
    //X轴序号
    var xIndex=pointInGrid[0];
    //获取当前图表的option
    var op=_this.chart.getOption();
    //获得图表中我们想要的数据
    var x=op.xAxis[0].data[xIndex];    //x轴名称
    // console.log(month)
    var value=op.series[0].data[xIndex];  //y轴数值
    // console.log(elementId+"-"+x+"-"+value)



    console.log("点击的柱状图是：",+x+"-"+value)
    //_this.$emit("clickGD",x)
  }
})