echarts--点击图表任意位置，获取到该点的XY坐标值

ec.png

代码如下：（methods里）

  myChart =  this.$echarts.init(document.getElementById("myChart"))
    
    myChart.setOption(this.option)
    // 给整个画布添加点击事件
    myChart.getZr().on('click', function (param) {
      const pointInPixel = [param.offsetX, param.offsetY]
      console.log('pointInPixel', pointInPixel)
      // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值，借助于索引值的获取到其它的信息
      // 转换X轴坐标
      let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
       // 转换Y轴坐标
       let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
      // x轴数据的索引值
      console.log('pointInGrid', pointInGrid2)
       // 所点击点的X轴坐标点所在X轴data的下标
      let xIndex = pointInGrid[0];
       // 所点击点的Y轴坐标点数值
      let yIndex = pointInGrid2[1];
      // 使用getOption() 获取图表的option
      let op = myChart.getOption();
      //获取到x轴的索引值和option之后，我们就可以获取我们需要的任意数据。
      // 点击点的X轴对应坐标的名称
      var time = op.xAxis[0].data[xIndex];
      // 点击点的series -- data对应的值
      var value = op.series[0].data[xIndex];
      console.log('val', time)
    });

data中option内容

  option:{
    tooltip:{
        show:true,
        trigger:"item"
    },
    legend:{
        show:true,
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        // data: [300, 600, 900, 1200, 1500, 1900],
        boundaryGap: [0, '30%']
    },
    series:[
        {
            name:"折线图",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
        },
        {
            name:"折线图2",
            data: [620, 654, 500, 800, 900, 1000, 1100],
            type: 'line',
            itemStyle:{//随机颜色
                color:"rgba("+ Math.floor(Math.random()*256) + ',' +  Math.floor(Math.random()*256) + ',' +Math.floor(Math.random()*256) + ',' +  (Math.random()*10).toFixed(1) +')'
            }
        }
    ]
  },