需求:
需要在echartstooltip點選學校的名稱，跳轉到詳情頁面；專案是從上海市--->某個區---->具體的學校（在最後一級的tooltip中繫結一個點選事件）

‘

專案是用vue和echarts實現的，echarts是新版本（^5.0.2），並不能把點選事件繫結在window上

解決方法：

1、設定tooltip

enterable: true, //允許滑鼠進入提示懸浮層中，triggeron:'click',//提示框觸發的條件 mousemove滑鼠移動時觸發 click滑鼠點選時觸發 'mousemove|click'同時滑鼠移動和點選時觸發

 tooltip: {
          
 
// 提示框元件
          show: true, // 顯示提示框元件
          trigger: "item", // 觸發型別
          triggerOn: "mousemove", // 出發條件
          //   formatter: "名稱:{b}<br/>座標:{c}",
          enterable: true, //允許滑鼠進入提示懸浮層中
          showContent: true,
          triggerOn: "click", //提示框觸發的條件  mousemove滑鼠移動時觸發 click滑鼠點選時觸發  'mousemove|click'同時滑鼠移動和點選時觸發
 

          //   confine: true, //把toolTip限制在圖表的區域內
          className: "areaTool",
          // hideDelay: 100000, //延時消失時間
          formatter: (item) => {
            this.hookToolTip = item;
            // 經緯度太長需要對位數進行擷取顯示，保留七位小數
            // 需要繫結點選事件
            var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +   
              item.name 
 
+
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "經度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "緯度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考場數" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "個" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "監考教師" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "個" +
              "</p>";

            return tipHtml;
          },
        },

2、定義hookToolTip變數，在formatter中給hookToolTip賦值，新增一個id，然後通過watch去檢測dom元素，可以通過onclick去繫結事件，也可以通過addEventListerner去註冊事件

  watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通過onclick註冊事件 querySelectorAll獲取的元素是一個數組
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通過addEventListener註冊事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //   immediate: true,
      //   deep: true,
    },
  },

3、在methods中新增方法

4、完整程式碼

data(){
       hookToolTip: {},     
},

  watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通過onclick註冊事件 querySelectorAll獲取的元素是一個數組
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通過addEventListener註冊事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //並不需要進入頁面就檢查
      //   immediate: true,
      //   deep: true,
    },
  },

  methods: {
    chartClick() {
      console.log(
        this.hookToolTip,
        "-------addEventList",
        this.hookToolTip.name
      );
    },
 },

    
//echarts
      tooltip: {
          // 提示框元件
          show: true, // 顯示提示框元件
          trigger: "item", // 觸發型別
          triggerOn: "mousemove", // 出發條件
          //   formatter: "名稱:{b}<br/>座標:{c}",
          enterable: true, //允許滑鼠進入提示懸浮層中
          showContent: true,
          triggerOn: "click", //提示框觸發的條件  mousemove滑鼠移動時觸發 click滑鼠點選時觸發  'mousemove|click'同時滑鼠移動和點選時觸發
          //   confine: true, //把toolTip限制在圖表的區域內
          className: "areaTool",
          // hideDelay: 100000, //延時消失時間
          formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // 經緯度太長需要對位數進行擷取顯示，保留七位小數
            // 需要繫結點選事件
            var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
              item.name +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "經度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "緯度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考場數" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "個" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "監考教師" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "個" +
              "</p>";

            return tipHtml;
          },
        },