世界地图+自动切换动效，切换完成后回到初始显示后再次切换

微信截图_20231114111824.png
微信截图_20231114111849.png

引入使用

import MapAll from './components/MapAll'
<MapAll :id="'MapObj'" ref="Map" :datas="MapObj"></MapAll>

组件代码（感叹号最需要部分）

<template>
  <div :id="id" class="echarts1" @mousemove="echarts1Tooltip = true" @mouseout="echarts1Tooltip = false"></div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

export default {
  // startVal 初始值 endVal 最终值 title 标签值
  props: {
    datas: {
      type: [Array, Object, String],
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      Time1: null,
      echarts1Tooltip: false,
      geoCoordMap: { '阿富汗': [67.709953, 33.93911], '安哥拉': [17.873887, -11.202692], '阿尔巴尼亚': [20.168331, 41.153332], '阿联酋': [53.847818, 23.424076], '阿根廷': [-63.61667199999999, -38.416097], '亚美尼亚': [45.038189, 40.069099], '法属南半球和南极领地': [69.348557, -49.280366], '澳大利亚': [133.775136, -25.274398], '奥地利': [14.550072, 47.516231], '阿塞拜疆': [47.576927, 40.143105], '布隆迪': [29.918886, -3.373056], '比利时': [4.469936, 50.503887], '贝宁': [2.315834, 9.30769], '布基纳法索': [-1.561593, 12.238333], '孟加拉国': [90.356331, 23.684994], '保加利亚': [25.48583, 42.733883], '巴哈马': [-77.39627999999999, 25.03428], '波斯尼亚和黑塞哥维那': [17.679076, 43.915886], '白俄罗斯': [27.953389, 53.709807], '伯利兹': [-88.49765, 17.189877], '百慕大': [-64.7505, 32.3078], '玻利维亚': [-63.58865299999999, -16.290154], '巴西': [-51.92528, -14.235004], '文莱': [114.727669, 4.535277], '不丹': [90.433601, 27.514162], '博茨瓦纳': [24.684866, -22.328474], '中非共和国': [20.939444, 6.611110999999999], '加拿大': [-106.346771, 56.130366], '瑞士': [8.227511999999999, 46.818188], '智利': [-71.542969, -35.675147], '中国': [104.195397, 35.86166], '象牙海岸': [-5.547079999999999, 7.539988999999999], '喀麦隆': [12.354722, 7.369721999999999], '刚果民主共和国': [21.758664, -4.038333], '刚果共和国': [15.827659, -0.228021], '哥伦比亚': [-74.297333, 4.570868], '哥斯达黎加': [-83.753428, 9.748916999999999], '古巴': [-77.781167, 21.521757], '北塞浦路斯': [33.429859, 35.126413], '塞浦路斯': [33.429859, 35.126413], '捷克共和国': [15.472962, 49.81749199999999], '德国': [10.451526, 51.165691], '吉布提': [42.590275, 11.825138], '丹麦': [9.501785, 56.26392], '多明尼加共和国': [-70.162651, 18.735693], '阿尔及利亚': [1.659626, 28.033886], '厄瓜多尔': [-78.18340599999999, -1.831239], '埃及': [30.802498, 26.820553], '厄立特里亚': [39.782334, 15.179384], '西班牙': [-3.74922, 40.46366700000001], '爱沙尼亚': [25.013607, 58.595272], '埃塞俄比亚': [40.489673, 9.145000000000001], '芬兰': [25.748151, 61.92410999999999], '斐': [178.065032, -17.713371], '福克兰群岛': [-59.523613, -51.796253], '法国': [2.213749, 46.227638], '加蓬': [11.609444, -0.803689], '英国': [-3.435973, 55.378051], '格鲁吉亚': [-82.9000751, 32.1656221], '加纳': [-1.023194, 7.946527], '几内亚': [-9.696645, 9.945587], '冈比亚': [-15.310139, 13.443182], '几内亚比绍': [-15.180413, 11.803749], '赤道几内亚': [10.267895, 1.650801], '希腊': [21.824312, 39.074208], '格陵兰': [-42.604303, 71.706936], '危地马拉': [-90.23075899999999, 15.783471], '法属圭亚那': [-53.125782, 3.933889], '圭亚那': [-58.93018, 4.860416], '洪都拉斯': [-86.241905, 15.199999], '克罗地亚': [15.2, 45.1], '海地': [-72.285215, 18.971187], '匈牙利': [19.503304, 47.162494], '印尼': [113.921327, -0.789275], '印度': [78.96288, 20.593684], '爱尔兰': [-8.24389, 53.41291], '伊朗': [53.688046, 32.427908], '伊拉克': [43.679291, 33.223191], '冰岛': [-19.020835, 64.963051], '以色列': [34.851612, 31.046051], '意大利': [12.56738, 41.87194], '牙买加': [-77.297508, 18.109581], '约旦': [36.238414, 30.585164], '日本': [138.252924, 36.204824], '哈萨克斯坦': [66.923684, 48.019573], '肯尼亚': [37.906193, -0.023559], '吉尔吉斯斯坦': [74.766098, 41.20438], '柬埔寨': [104.990963, 12.565679], '韩国': [127.766922, 35.907757], '科索沃': [20.902977, 42.6026359], '科威特': [47.481766, 29.31166], '老挝': [102.495496, 19.85627], '黎巴嫩': [35.862285, 33.854721], '利比里亚': [-9.429499000000002, 6.428055], '利比亚': [17.228331, 26.3351], '斯里兰卡': [80.77179699999999, 7.873053999999999], '莱索托': [28.233608, -29.609988], '立陶宛': [23.881275, 55.169438], '卢森堡': [6.129582999999999, 49.815273], '拉脱维亚': [24.603189, 56.879635], '摩洛哥': [-7.092619999999999, 31.791702], '摩尔多瓦': [28.369885, 47.411631], '马达加斯加': [46.869107, -18.766947], '墨西哥': [-102.552784, 23.634501], '马其顿': [21.745275, 41.608635], '马里': [-3.996166, 17.570692], '缅甸': [95.956223, 21.913965], '黑山': [19.37439, 42.708678], '蒙古': [103.846656, 46.862496], '莫桑比克': [35.529562, -18.665695], '毛里塔尼亚': [-10.940835, 21.00789], '马拉维': [34.301525, -13.254308], '马来西亚': [101.975766, 4.210484], '纳米比亚': [18.49041, -22.95764], '新喀里多尼亚': [165.618042, -20.904305], '尼日尔': [8.081666, 17.607789], '尼日利亚': [8.675277, 9.081999], '尼加拉瓜': [-85.207229, 12.865416], '荷兰': [5.291265999999999, 52.132633], '挪威': [8.468945999999999, 60.47202399999999], '尼泊尔': [84.12400799999999, 28.394857], '新西兰': [174.885971, -40.900557], '阿曼': [55.923255, 21.512583], '巴基斯坦': [69.34511599999999, 30.375321], '巴拿马': [-80.782127, 8.537981], '秘鲁': [-75.015152, -9.189967], '菲律宾': [121.774017, 12.879721], '巴布亚新几内亚': [143.95555, -6.314992999999999], '波兰': [19.145136, 51.919438], '波多黎各': [-66.590149, 18.220833], '北朝鲜': [127.510093, 40.339852], '葡萄牙': [-8.224454, 39.39987199999999], '巴拉圭': [-58.443832, -23.442503], '卡塔尔': [51.183884, 25.354826], '罗马尼亚': [24.96676, 45.943161], '俄罗斯': [105.318756, 61.52401], '卢旺达': [29.873888, -1.940278], '西撒哈拉': [-12.885834, 24.215527], '沙特阿拉伯': [45.079162, 23.885942], '苏丹': [30.217636, 12.862807], '南苏丹': [31.3069788, 6.876991899999999], '塞内加尔': [-14.452362, 14.497401], '所罗门群岛': [160.156194, -9.64571], '塞拉利昂': [-11.779889, 8.460555], '萨尔瓦多': [-88.89653, 13.794185], '索马里兰': [46.8252838, 9.411743399999999], '索马里': [46.199616, 5.152149], '塞尔维亚共和国': [21.005859, 44.016521], '苏里南': [-56.027783, 3.919305], '斯洛伐克': [19.699024, 48.669026], '斯洛文尼亚': [14.995463, 46.151241], '瑞典': [18.643501, 60.12816100000001], '斯威士兰': [31.465866, -26.522503], '叙利亚': [38.996815, 34.80207499999999], '乍得': [18.732207, 15.454166], '多哥': [0.824782, 8.619543], '泰国': [100.992541, 15.870032], '塔吉克斯坦': [71.276093, 38.861034], '土库曼斯坦': [59.556278, 38.969719], '东帝汶': [125.727539, -8.874217], '特里尼达和多巴哥': [-61.222503, 10.691803], '突尼斯': [9.537499, 33.886917], '土耳其': [35.243322, 38.963745], '坦桑尼亚联合共和国': [34.888822, -6.369028], '乌干达': [32.290275, 1.373333], '乌克兰': [31.16558, 48.379433], '乌拉圭': [-55.765835, -32.522779], '美国': [-95.712891, 37.09024], '乌兹别克斯坦': [64.585262, 41.377491], '委内瑞拉': [-66.58973, 6.42375], '越南': [108.277199, 14.058324], '瓦努阿图': [166.959158, -15.376706], '西岸': [35.3027226, 31.9465703], '也门': [48.516388, 15.552727], '南非': [22.937506, -30.559482], '赞比亚': [27.849332, -13.133897], '津巴布韦': [29.154857, -19.015438], '新加坡': [103.809726, 1.3814453] }, // 坐标数据城市的点数组
      myChart: '',
      option: '',
      dataList: [],
      center: ''
    }
  },
  watch: {
    // 这是监听json值变化
    datas: {
      // json为监听参数名
      handler: function (val, oldVal) {
        // 不能用箭头函数
        this.echartsFun(val)
      }
    }
  },
  mounted() {
    this.echartsFun()
  },
  beforeDestroy() {
    clearInterval(this.Time1)
  },
  methods: {
    echartsFun(val) {
      // console.log(val)
      if (val == undefined) {
        return
      }
      this.dataList = []
      val.forEach((v) => {
        this.dataList.push({ name: v.location, name2: v.cn_location, value: v.count })
      })
      echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
      this.myChart = echarts.init(document.getElementById(this.id))
      this.myChart.clear()
      axios.get(process.env.VUE_APP_BASE_map + '/mapJson/world.json').then((res) => {
        echarts.registerMap('world', res.data)
        this.option = {
          visualMap: {
            show: false,
            min: 1,
            // max: 50,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
              // color: ['#3a7fd5', '#24CFF4']
              color: ['#50EDFC', '#EFC45C']
            }
          },
          geo: {
            map: 'world',
            zoom: 1.4,
            show: true,
            roam: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            // itemStyle: {
            //   normal: {
            //     areaColor: '#3a7fd5',
            //     borderColor: '#0a53e9', // 线
            //     shadowColor: '#092f8f', // 外发光
            //     shadowBlur: 20
            //   },
            //   emphasis: {
            //     areaColor: '#0a2dae' // 悬浮区背景
            //   }
            // }
            itemStyle: {
              normal: {
                areaColor: '#3a7fd5',
                borderColor: '#53D9FF',
                borderWidth: 1.3,
                shadowBlur: 15,
                shadowColor: 'rgb(58,115,192)',
                shadowOffsetX: 7,
                shadowOffsetY: 6
              },
              emphasis: {
                areaColor: '#8dd7fc',
                borderWidth: 1.6,
                shadowBlur: 25
              }

            }
          },
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              if (params.data != undefined) {
                let item = this.dataList.find((v) => (v.name == params.name))
                // console.log(item)
                if (item) {
                  return item.name2 + ' : ' + item.value
                } else {
                  return item.name2 + ' : ' + 0
                }
              } else {
                return params.name + ' : ' + 0
              }
            }
          },
          series: [
            {
              name: 'light',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 5,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false // 是否显示地名
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#fff'
                }
              },
              data: this.convertData(this.dataList)
            },
            {
              type: 'map',
              map: 'world',
              geoIndex: 0,
              aspectScale: 0.75, // 长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#FFFFFF'
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              },
              animation: false,
              data: this.convertData(this.dataList)
            },
            {
              name: 'Top 5',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: [50, 50],
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: 9
                  },
                  formatter(value) {
                    return value.value[2];
                  }
                }
              },
              itemStyle: {
                normal: {
                  // color: '#dfae10' // 标志颜色
                  color: '#C23531' // 气泡标志颜色
                }
              },
              data: this.convertData(this.dataList.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 20)), // 流量最大的前*个
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              zlevel: 1
            }
          ]
        }
        this.myChart.setOption(this.option, true) // true无数据时更新试图
        this.myChart.resize() // 根据窗口大小渲染
        this.myChart.on('click', (param) => {
          // this.$parent.mapUserFun(param.name)
          // this.$emit('dataIndexFun', param.dataIndex)
        })
        this.dhFun()
      })
    },
    convertData(data) {
      let res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name2];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      // console.log(res, '气泡个数')
      return res;
    },
    dhFun() {
      if (this.dataList.length > 0) {
        this.center = this.myChart.getOption().geo.center;
        clearInterval(this.Time1)
        let index1 = 0 // 播放所在下标
        let showObj = {};
        this.Time1 = setInterval(() => {
          this.myChart.dispatchAction({// 饼图用这个取消之前的
            type: "hideTip"
          });
          if (this.echarts1Tooltip) { // 移入暂停
            return;
          }
          let showArr = this.option.series[2].data// 显示的气泡数据
          // console.log(showArr)
          // return
          // console.log(showArr, showArr[index1].name)
          let name = this.dataList.find((v) => (v.name == showArr[index1].name)).name2
          // console.log(name)
          if (name) {
            console.log(name)
            for (let k in this.geoCoordMap) {
              console.log(k, name, k == name)
              if (k == name) {
                console.log(this.geoCoordMap[k])
                // console.log(name, showObj)
                showObj = this.geoCoordMap[k]
                break
              }
            }
            console.log(showObj)
            this.myChart.setOption({// 设置某个区域为中心点，并放大
              geo: {
                center: [showObj[0], showObj[1]], // 设置新的中心坐标
                zoom: 4// 放大
              }
            });
            setTimeout(() => {
              this.myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index1
              })
              index1++
              if (index1 > showArr.length - 1) {
                clearInterval(this.Time1)
                setTimeout(() => {
                  this.myChart.dispatchAction({
                    type: 'hideTip'
                  })
                  this.myChart.setOption({// 设置某个区域为中心点，并放大
                    geo: {
                      center: this.center, // 设置新的中心坐标
                      zoom: 1.2// 初始大小
                    }
                  });
                  setTimeout(() => {
                    this.dhFun()
                  }, 8000)
                }, 4000)
              }
            }, 800)
          }
        }, 4000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
}
</style>