預(yù)期效果：提示框顯示時(shí)，相應(yīng)的x坐標(biāo)月份高亮（藍(lán)色），同時(shí)提示框顯示。

在這里插入圖片描述

實(shí)現(xiàn)流程：
1.設(shè)置一個(gè)變量axisValue用于接收選中x值，當(dāng)橫軸值等于選中的axisValue時(shí)，設(shè)置藍(lán)色

 axisLabel: {
              show: true,
              textStyle: {
                fontSize: 10, //更改坐標(biāo)軸文字大小
                fontFamily: "PingFangSC-Regular",
                color: function (value, index) {
                  return _this.axisValue !== "" && _this.axisValue === value
                    ? "#32AAFF"
                    : "#666666";
                },
              },
              interval: 0,
            },

代碼片段截圖：

代碼片段截圖

2.設(shè)置chartsCurrentData用于接收tooltip顯示時(shí)的charts信息。

 tooltip: {
          trigger: "axis",
          formatter: function (params) {
            _this.chartsCurrentData = params[0];
            }
            // 其他代碼信息.....
          }

代碼片段截圖：

代碼片段截圖

3.點(diǎn)擊時(shí)需要拿到chartsCurrentData的值，同時(shí)需要把對(duì)應(yīng)橫坐標(biāo)值給axisValue，并且相應(yīng)月份高亮顯示，提示框不消失。

 myChartId.getZr().on("click", (params) => {
        // 拿到當(dāng)前坐標(biāo)位置
        const pointInPixel = [ params.offsetX, params.offsetY ];
        // 點(diǎn)擊空的地方不執(zhí)行邏輯
        if (myChartId.containPixel("grid", pointInPixel)) {
          console.log("拿到當(dāng)前點(diǎn)擊節(jié)點(diǎn)的索引", _this.chartsCurrentData);
          const {name, dataIndex, seriesIndex} = _this.chartsCurrentData
          _this.axisValue = name;
          // 重新加載折線圖
          myChartId.dispatchAction({
            type: "restore",
          });
          // 重新顯示彈框位置
          myChartId.dispatchAction({
            type: "showTip",
            seriesIndex: seriesIndex,
            dataIndex: dataIndex,
          });
        }
      });

其實(shí)我想說的是，Echarts還可以通過dispatchAction來觸發(fā)action。又多了解到一種解決問題的方法，特此記錄一下。

大家想了解，可以查看官網(wǎng)api: https://echarts.apache.org/zh/api.html#action.tooltip.showTip