直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div id="myChart" style="width: 600px; height: 400px"></div>
    </div>

    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          index: 0,
          myChart: null,
          // 地图的点
          myData: [
  {
    "name": "上海",
    "value": [121.4648, 31.2891],
    "count": 33,
  },
  {
    "name": "杭州",
    "value": [120.208324, 30.252583],
    "count": 75,
  },
  {
    "name": "温州",
    "value": [120.706191, 28.001086],
    "count": 188,
  },
]
,
          // 定时器
          timerObj: null,
        },
        methods: {
          // trigger单击事件
          triggerClick() {
            window.open("https://www.baidu.com");
          },
          // tooltip移入事件
          mOver(e, el) {
            const _this = this;
            if (!e) e = window.event;
            var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
            while (reltg && reltg != el) reltg = reltg.parentNode;
            if (reltg != el) {
              // 这里可以编写 onmouseenter 事件的处理代码
              // 鼠标移入tooltip就把定时器移除
              clearInterval(_this.timerObj);
              e.stopPropagation();
            }
          },
          // tooltip移出事件
          mOut(e, el) {
            const _this = this;
            if (!e) e = window.event;
            var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
            while (reltg && reltg != el) reltg = reltg.parentNode;
            if (reltg != el) {
              // 这里可以编写 onmouseleave 事件的处理代码
              // 切换Tooltip
              setTimeout(() => {
                _this.swichTooltip();
              }, 400);

              // 重新创建定时器
              _this.autoTooltip();
              e.stopPropagation();
            }
          },
          // 实例化地图
          initMap() {
            let myData = this.myData;
            let option = {
              tooltip: {
                enterable: true,
                alwaysShowContent: true,
                show: true,
                triggerOn: "click",
                backgroundColor: "#050E29",
                borderColor: "#050E29",
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                },
                formatter: function (obj) {
                  return `<div onclick="triggerClick(event, this)" onmouseover="mOver(event,this)" onmouseout="mOut(event,this)" style="text-align:left">
                                    <div>
                                    地区：
                                        ${obj.data.name}
                                    </div>    
                                    <div>
                                    项目数：
                                        ${obj.data.count}
                                    </div>
                                </div>`;
                },
              },
              geo: {
                map: "china",
                roam: false,
                itemStyle: {
                  areaColor: "#022065",
                  borderColor: "#0165b4",
                },
                emphasis: {
                  disabled: true,
                  areaColor: "#022065",
                },
                silent: true,
              },
              series: [
                {
                  name: "", // series名称
                  type: "effectScatter", // series图表类型
                  coordinateSystem: "geo", // series坐标系类型
                  data: myData, // series数据内容
                  rippleEffect: {
                    brushType: "stroke",
                  },
                  label: {
                    show: false,
                    fontSize: 16,
                    color: "green",
                    position: "right",
                    formatter: "{b}",
                  },
                  symbolSize: "10",
                  itemStyle: {
                    color: "#00FF00",
                  },
                },
              ],
            };
            this.myChart = echarts.init(document.getElementById("myChart"));
            this.myChart.setOption(option);
            this.autoTooltip();
          },
          // tooltip切换
          swichTooltip() {
            this.myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: this.index,
            });
            this.index++;
            if (this.index > this.myData.length) {
              this.index = 0;
            }
          },
          // 地图坐标tooltip循环播放
          autoTooltip() {
            const _this = this;
            this.timerObj = setInterval(function () {
              _this.swichTooltip();
            }, 2000);
          },
        },
        mounted() {
          this.initMap();
          // 往全局window对象注册vue的方法
          window.mOver = this.mOver;
          window.mOut = this.mOut;
          window.triggerClick = this.triggerClick;
        },
      });
    </script>
  </body>
</html>

重点

如何在原生的js中调用vue的方法

// 往全局window对象注册vue的方法
window.mOver = this.mOver;
// 原生html中直接调用
<div onmouseover="mOver(event,this)"></div>

div父级增加鼠标的移入移出事件后，子div也会触发导致移入移出的事件触发错乱

        // tooltip移入事件
          mOver(e, el) {
            const _this = this;
            if (!e) e = window.event;
            var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
            while (reltg && reltg != el) reltg = reltg.parentNode;
            if (reltg != el) {
              // 这里可以编写 onmouseenter 事件的处理代码
            
            }
          },
          // tooltip移出事件
          mOut(e, el) {
            const _this = this;
            if (!e) e = window.event;
            var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
            while (reltg && reltg != el) reltg = reltg.parentNode;
            if (reltg != el) {
              // 这里可以编写 onmouseleave 事件的处理代码
            
            }
          },

vue+echars的地图的tooltip自动循环显示并且增加tooltip点击事件

直接上代码

重点