echart图表点击事件

今天有个奇怪的需求，需要点击echart图表内容切换数据，所以百度研究了下相关的逻辑，现记个小记：

// 获取echart实例
      var myChart = echarts.init(document.getElementById("cardEchart"));
      // getZr()：echart属性获取echart实例全图
      // 因为echart直接绑定on(click)只能点击具体的柱体(柱状图)才能触发，但是加上getZr就可以通过获取全图的点击事件
      // 因为点击事件只能监听手指触摸的时候，如果手指在图表中滑动就无法监听，所以最后使用mouseup（手指松开）来代替
      myChart.getZr().on("mouseup", function (param) {
        // 获取 点击的 触发点像素坐标
        let pointInPixel = [param.offsetX, param.offsetY]
        // 根据convertFromPixel获取 x y 坐标 0(X轴) 1(Y轴)
        let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        // let x_index = pointInGrid[0];
        let y_index = pointInGrid[1];
        console.log('坐标轴:');
        console.log(pointInGrid);
        //获取当前图表的option 其中的xAxis是X轴的数据,yAxis是Y轴的数据
        var op=myChart.getOption();
        console.log('x,y数据:');
        console.log(op.xAxis);
        console.log(op.yAxis);
        // 当前y轴的数据
        console.log(op.yAxis[0].data[y_index]);
      });