柱状图点击传参点击阴影部分

最新推荐文章于 2026-06-23 13:23:11 发布

原创最新推荐文章于 2026-06-23 13:23:11 发布 · 490 阅读

0 ·

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

标签

#前端 #elementui #vue.js

收录于

本文介绍了如何在Vue应用中使用echarts组件，通过监听图表点击事件并定位到grid区域，进一步获取坐标并触发数据名称的显示。通过`offsetX`和`offsetY`获取像素位置，然后进行坐标转换，最终触发'click'事件并传递数据名参数。

 // this.charts.getZr().on('click', params =>{
        //   this.$emit('click', params)
        // })
        this.charts.getZr().on('click', params => {
    const pointInPixel = [
      params.offsetX,
      params.offsetY,
    ];
    if (this.charts.containPixel('grid', pointInPixel)) {
      const index = this.charts.convertFromPixel({seriesIndex: 0}, pointInPixel)[0];
      const op = this.charts.getOption();
      const name = op.xAxis[0].data[index ];
      this.$emit('click', {
        name
      })
    }
})