echarts折线图实现点击事件的添加

5,494 阅读1分钟

1、主要应用场景

当业务需求是点击某个折线图的点需要发送请求的时候这个时候需要有一个点击事件,来做请求数据事件的触发;

2、这里做以下一个例子

给echarts折线图的某个点添加点击事件,并打印横纵坐标点的数据。

01、效果如下:

微信截图_20211220105808.png

02、添加点击事件:

echart添加点击事件用通过on 方法实现,写在myChart.setOption(option)下面即可。

myChart.on('click', function (params) {//用于做每个点的监听,只用点击点才能够获取想要的监听效果;
        let data = {
          x: params.name,
          y: params.value
        }
        console.log(data)
        alert(JSON.stringify(data))

      });

03、制作折线图表

juejin.cn/post/704362…

04、还有一个坑

在添加的点击事件前面加上这样一句代码,防止多次渲染echarts图造成的点击一次触发多次事件
myChart.off("click");
完整代码:

myChart.off("click");
myChart.on('click', function (params) {//用于做每个点的监听,只用点击点才能够获取想要的监听效果;
        let data = {
          x: params.name,
          y: params.value
        }
        console.log(data)
        alert(JSON.stringify(data))

      });