Echarts 折线图点击事件与去除折线功能冲突解决方法

原创已于 2024-04-05 01:11:26 修改 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript #vue #html

于 2024-04-04 23:40:01 首次发布

文章讲述了如何在Echarts折线图中实现点击列元素显示图片的功能，同时避免在点击取消折线功能时误触发。关键在于判断点击位置的Y轴坐标值，当其小于100时显示图片对话框。

在做折线图的时候想实现一个功能，点击当前列元素的时候显示图片，但是点击Echarts自带的取消折线显示功能时也会显示图片出来

后来研究了一下，是因为默认点击事件挂载到了整个生成图表上，而取消折线功能也在这一范围内，我们要做的就是在点击事件里判断一下点击的位置

myChart.getZr().on('click', params => {
    const pointInPixel = [params.offsetX, params.offsetY]
    // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值，借助于索引值的获取到其它的信息
    // 转换X轴坐标
    let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
    // 转换Y轴坐标
    let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
    clickheight = pointInGrid2[1]
    // x轴数据的索引值
    // 所点击点的X轴坐标点所在X轴data的下标
    let xIndex = pointInGrid[0];
    // 所点击点的Y轴坐标点数值
    if (clickheight < 100) {
      console.log(clickheight);
      // 呼出图片dialog
      // imgfordialog.value = imgurls.value[xIndex]
      // dialogVisible.value = true
    }
  })

可以看到箭头位置就是我点击的地方，在代码里获取鼠标点击Y轴坐标clickheight值为99.7，通过判断这个值是否<100就能解决这一冲突