echarts 鼠標移入灰色區域獲取軸數據，並賦值

1、首先設置 echarts 內容：

const myChart3 = this.$echarts.init(document.getElementById('myChart3'));
      myChart3.setOption({
        tooltip: {
        },
        grid:{
        },
        legend: {
          x: 'center',
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          },
          data: ['成功筆數', '拒付筆數', '退款筆數', '拒付率']
        },
        calculable: true,
        triggerEvent: true,
        xAxis: [
          {
            type: 'category',
            // triggerEvent: true,
            data: date
          }
        ],
        yAxis: [
          {
            type: 'value',
            // triggerEvent: true,
            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
          },
        ]
      });

2、鼠標移入事件：

myChart3.getZr().on('mousemove', function(params) {
        this.newimgAnalysisList = [];
        let pointInPixel = [params.offsetX, params.offsetY];
        let pointInGrid = myChart3.convertFromPixel({seriesIndex: 0}, pointInPixel);
        let xIndex = pointInGrid[0];
        let op = myChart3.getOption();
        let machineName = op.xAxis[0].data[xIndex]; //獲取x軸名字
        for(const i in this.imgAnalysisList) { //根據x軸名字，匹配后端返回過來的數據
          if(!this.imgAnalysisList.hasOwnProperty(i)) continue;
          if(machineName === this.imgAnalysisList[i].country) {
            this.newimgAnalysisList.push(this.imgAnalysisList[i]);
          }
        }
      });

3、若獲取不到 vue 下的 data，則需要把  myChart3.getZr().on('mousemove', function(params){.....} 改成：  myChart3.getZr().on('mousemove', (params) => {}) 箭頭函數即可。

4、.getZr() ：指的是當去掉它的時候，鼠標 點擊/移入 等事件，只能在點上，加上它的時候，則可以把事件綁定為整個灰色區域

 

 

 5、另：echarts 支持的常見鼠標事件類型有， “ click ”、“ dblclick ”、“ mousedown ”、“ mousemove ”、“ mouseup ”、" mouseover "、" mouseout  "、" globalout "、" contextmenu " 事件，可根據需要修改。