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

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

sly _ sly

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

阅读量440

点赞数

文章标签：前端 elementui vue.js

本文链接：https://blog.youkuaiyun.com/m0_61749828/article/details/124195432

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 // 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
      })
    }
})