echarts 折线图如何添加点击事件

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

实现效果

效果展示

点击事件

echart添加点击事件用通过on 方法实现

myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

制作折线图表

• 通过cdn引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> 

• 编写html

<div id="main" style="width: 100%;height:503px;overflow: hidden;"></div>

• 实现一个echarts

<script type="text/javascript">
  
    function showLine2(str) {
      console.log(str)
      var edata = JSON.parse(str)
      var myChart = echarts.init(document.getElementById('main'));
      // 图表的配置项和数据
      var option = {
        
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            color: '#666669',
            lineStyle: {
              type: 'solid',
              color: '#666669',//左边线的颜色
              width:'1'//坐标线的宽度
            }
          },
          name: '秒',
          axisLabel: {
            formatter: '{value} ',
            color: '#666669'
          },
          data: edata.arr1
        },
        yAxis: {
          name: 'mm/s',
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#666669'
          },
          splitLine: {
            lineStyle: {
              color: "#EEEEF1"
            }
          },
          axisLine: {
            color: '#666669',
            lineStyle: {
              type: 'solid',
              color: '#666669',//左边线的颜色
              width:'1'//坐标线的宽度
            }
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [{
            lte: 6,
            color: '#FF4A4A'
          }, {
            gt: 6,
            lte: 8,
            color: '#FF4A4A'
          }, {
            gt: 8,
            lte: 14,
            color: '#FF4A4A'
          }, {
            gt: 14,
            lte: 17,
            color: '#FF4A4A'
          }, {
            gt: 17,
            color: '#FF4A4A'
          }]
        },
        dataZoom: [{
          show: true,
          type: 'inside',
          filterMode: 'none',
          xAxisIndex: [0],
          startValue: -20,
          endValue: 20
        }, {
          show: true,
          type: 'inside',
          filterMode: 'none',
          yAxisIndex: [0],
          startValue: -20,
          endValue: 20
        }],
        series: [{
          itemStyle : {
            normal : {
              lineStyle:{
                color:'#FF4A4A'
              }
            }
          },
          name: 'Hz',
          type: 'line',
          smooth: true,
          data: edata.arr2,
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    // 此处为数据，这里就不模拟了，可随便放点数据上去
    let data = {
        arr1:[],
        arr2:[]
    }
    let str = JSON.stringify(data)
    showLine2(str)
  </script>

• 效果

  
  

点击事件添加

此代码添加到myChart.setOption(option);下方就实现我们想要的效果了。

myChart.on('click', function (params) {
        console.log(params)
        let data = {
          x: params.name,
          y: params.value
        }
        console.log(data)
        alert(JSON.stringify(data))
        // window.webkit.messageHandlers.iOSObj.postMessage(data)
      });

注意：此方法只有点击柱状图形和折线的圆形折点才能触发通过on添加的事件监听。