前端-点击柱状图的柱子时调用函数

效果图

点击左图柱子获取右图的数据

代码如下

 mounted() {
    this.myChart1 = echarts.init(this.$refs.topL);
    this.option1 && this.myChart1.setOption(this.option1);
    this.myChart2 = echarts.init(this.$refs.topR);
    this.option2 && this.myChart2.setOption(this.option2);

    let myChart3 = echarts.init(this.$refs.bottom);
    this.option3 && myChart3.setOption(this.option3);

    this.myChart1.getZr().off(); // 这个代码很重要，必须要加上，要不然的话你可以试试看
    this.myChart1.getZr().on('click', params => {
      const actionObj = params.target;
      console.log('actionObj', actionObj);
      const myKey = Object.keys(actionObj)
        .sort()
        .filter(_ => _.indexOf('ec_inner') !== -1)[0];
      console.log('myKey', myKey);
      const res = actionObj[myKey];
      console.log(`当前点击了第${res.dataIndex}组数据中的第${res.seriesIndex}个柱子`);
      var pointInPixel = [params.offsetX, params.offsetY];
      if (this.myChart1.containPixel('grid', pointInPixel)) {
        /*此处添加具体执行代码*/
        var pointInGrid = this.myChart1.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
        //X轴序号
        var xIndex = pointInGrid[0];
        console.log('点击了横纵坐标', pointInPixel);
        console.log('【点击了第几组数据，纵坐标】', pointInGrid);
        //获取当前图表的option
        var op = this.myChart1.getOption();
        console.log('数据信息', op);
        //获得图表中我们想要的数据---下面就不简写了，默认说我们的折现有2条吧
        var xValue = op.xAxis[0].data[xIndex];
        console.log('x轴所对应的名字', xValue);
      }
    });
  },