1、需要的效果：初始左圖資料，點選區塊，上部分改變成點選的資料（此處資料就不做說明了，只說明點選圖表獲取軸資料效果）

2、圖表內容也不做說明：

const myChart3 = this.$echarts.init(document.getElementById('myChart3'));
      myChart3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            "fontSize": 12
          },
          // formatter: function(e) {
          //   console.log(e);
          // },
          // triggerOn: 'click'
        },
        grid:{
          x:65,
          y:45,
          x2:65,
          y2:20
        },
        legend: {
          x: 'center',
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          },
          data: ['成功筆數', '拒付筆數', '退款筆數', '拒付率']
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          x: 'right',
          y: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: date
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            splitNumber: 6,
            type: 'value',
          }
        ],
        series: [
          {
            name: '成功筆數',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#2566FA',
                barBorderRadius: [10, 10, 0, 0],
              }
            },
            data: date_4,
            // data: [10,20,10,5,10,90,30],
            yAxisIndex: 0
          },
          {
            name: '拒付筆數',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#F71F45',
                barBorderRadius: [10, 10, 0, 0],
              }
            },
            data: data_1,
            // data: [10,20,10,5,10,90,30],
            yAxisIndex: 0
          },
          {
            name: '退款筆數',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#f7bb3d',
                barBorderRadius: [10, 10, 0, 0],
              }
            },
            data: data_2,
            // data: [10,20,10,5,10,90,30],
            yAxisIndex: 0
          },
          {
            name: '拒付率',
            type: "line",
            smooth: true,//平滑曲線
            itemStyle: {
              normal: {
                color: '#F99025'
              }
            },
            data: data_3,
            // data: [10,20,60,50,0,5,7],
            yAxisIndex: 1
          },
        ]
      });

　3、需要在setOption 後面，新增點選事件：

　　　 myChart3.getZr().off('click');
      myChart3.getZr().on('click', async (params) => {
        this.newimgAnalysisList = [];  //需要展示的資料，初始化為空，避免多次點選多次賦值
        let pointInPixel = [params.offsetX, params.offsetY];
        let pointInGrid = myChart3.convertFromPixel({seriesIndex: 0}, pointInPixel);
        let xIndex = pointInGrid[0]; // 獲取x軸下標
 

        let op = myChart3.getOption(); // 獲取 setoption 的內容
        let machineName = op.xAxis[0].data[xIndex];
        console.log(machineName); //圖表x軸名稱
        for(const i in this.imgAnalysisList) { //從後端獲取，並儲存的資料
          if(machineName === this.imgAnalysisList[i].country) { //匹配x軸資料，獲取展示內容
            this.newimgAnalysisList.push(this.imgAnalysisList[i]);
          }
        }
      });