echarts tooltip在鼠标悬停一段时间后显示

中国地图上的气泡图，限制只有鼠标悬停在某个气泡上一段时间后再去查询后台，减少请求次数。

整个方法：

 initChinaMap() {
      var geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        舟山: [122.207216, 29.985295],
        齐齐哈尔: [123.97, 47.33],
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }

        return res;
      };
      let option = {
        tooltip: {
          trigger: "item",
          triggerOn:"none",//这里一定要设置none，否则会直接显示tips，而不是由dispatchAction来控制显示
          formatter: function (params, ticket, callback) {
            callback(
              ticket,
              '<ul><li><i class="dot" ' +
                'style="background-color:' +
                params.color +
                ';"></i>' +
                "<span>" +
                params.name +
                "</span></li>" +
                "<li>考核教师总数: 124 人</li>" +
                "<li>考核通过率: 98%</li>" +
                "<li>考核通过教师: 124 人</li>" +
                "<li>首次考核通过率: 52%</li>" +
                "<li>重新考核通过率: 54%</li>" +
                "</ul>"
            );
          },
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          inverse: true,
          x: "left",
          y: "bottom",
          splitList: [
            { start: 0, end: 0 },
            { start: 1, end: 10 },
            { start: 11, end: 25 },
            { start: 26, end: 50 },
            { start: 51, end: 75 },
            { start: 76, end: 100 },
            { start: 101, end: 150 },
            { start: 150, end: 500 },
            { start: 501, end: 1000 },
            { start: 1001, end: 2000 },
            { start: 2000 },
          ],
          inRange: {
            color: [
              "#D8D8D8","#81A9DB","#C1DEFF", "#F2FF6C","#FFE381","#FCB581","#FF9320","#FA6500","#FE0006","#DF0600","#AA0001",
            ],
          },
        },
        geo: {
          map: "china",
          itemStyle: {
            borderColor: "#111",
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
        series: [
          {
            name: "分校考核数据",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData([
              { name: "海门", value: 9 },
              { name: "鄂尔多斯", value: 12 },
              { name: "招远", value: 12 },
              { name: "舟山", value: 12 },
              { name: "齐齐哈尔", value: 14 },
            
            ]),
            symbolSize: 12,
            emphasis: {
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
          },
        ],
      };

      let chinaMap = this.$refs.chinaMap;
      if (chinaMap) {
        this.chinaChart = this.$echarts.init(chinaMap);
        this.chinaChart.setOption(option);
        //设置重绘事件监听
        window.addEventListener("resize", function () {
          this.chinaChart.resize();
        });
        
       //以下是重点，以下是重点，以下是重点
        let timer;
        let $this=this
        this.chinaChart.on('mouseover', 'series', function (params) {
            console.log(params);
            timer = setTimeout(()=>{
               //这里可以发送请求
               $this.chinaChart.dispatchAction({
                 type:'showTip',
                 seriesIndex: 0,
                 dataIndex:params.dataIndex
              });
            },1000)//鼠标悬停一秒，才触发事件
        });
         this.chinaChart.on('mouseout', 'series', function (params) {
           $this.chinaChart.dispatchAction({
                 type:'hideTip',
              });
            clearTimeout(timer)
         });

      }
    },

如果formatter里面的数据需要从后台获取，就在在获取后，重新setOption，就可以啦