效果展示

先看实现效果

image-20250211091912874

安装依赖

首先需要安装 Echarts 4.9.0 版本，因为5.0版本不包含地图文件，所以需要安装指定版本

1
npm install echarts@4.9.0

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<template>
  <div style="position: relative;width: 100%; height: 100%;">
    <!-- 区域标题 -->
    <div class="glob-title">全球服务情况</div>

    <div ref="chart" style="width: 100%; height: 110%;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/world'
// 地图翻译文件
import { nameMap } from '@/view/leftbottom/nameMap'
import { globalDataFun } from '@/api/xiaofeng'

export default {
  name: 'WorldMap',
  data() {
    return {
      chart: null,
      globData: null,
      tooltipIndex: 0,
      tooltipTimer: null,
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  methods: {
    async initChart() {
      // 从接口获取地图数据
      let globRes = await globalDataFun()
      this.globData = globRes.data.info.filter(item => item.regionName)
      console.log(this.globData, 'globDataglobData')
      let seriesData = this.globData.map(item => {
        return {
          name: item.regionName,
          value: item.saleAmount,
        }
      })

      this.chart = echarts.init(this.$refs.chart)

      const option = {
        tooltip: {
          trigger: 'item',
          position: function(point, params, dom, rect, size) {
            var x = 0
            var y = 0
            var pointX = point[0]
            var pointY = point[1]
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]
            if (boxWidth > pointX) {
              x = 5
            } else {
              x = pointX - boxWidth - 5
            }
            if (boxHeight > pointY) {
              y = 5
            } else {
              y = pointY - boxHeight - 5
            }
            return [x, y]
          },
          backgroundColor: 'rgba(63,96,235,0.8)',
          borderWidth: '1',
          borderColor: '#ffffff',
          textStyle: {
            color: '#ffffff',
          },
          formatter(params) {
            return `
            <div style='display: flex;align-items: center;gap: 5px;'>
              <div style='width: 10px;height: 10px;border-radius: 5px;background-color: red;'></div>
              <div>${params.name}</div>
            </div>
          `
          },
        },
        visualMap: {
          show: true,
          textStyle: {
            color: '#FFFFFF',
          },
          left: '5%',
          top: '65%',
          splitList: [
            { start: 750000 },
            { start: 500000, end: 750000 },
            { start: 250000, end: 500000 },
            { start: 0, end: 250000 },
          ],
          color: ['#233dab', '#324fcd', '#3f60eb', '#556dd1'],
        },
        series: [
          {
            name: '世界地图',
            type: 'map',
            mapType: 'world',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#556dd1',
                borderWidth: 1,
                borderColor: '#19266b',
              },
              emphasis: {
                areaColor: '#FFD700', // 将高亮颜色设置为黄色
              },
            },
            label: {
              normal: {
                show: true,
                color: '#ffffff',
                formatter: function(params) {
                  if (params.value) {
                    return '{red|●} '
                  }
                  return ''
                },
                rich: {
                  red: {
                    color: 'red',
                  },
                },
              },
              emphasis: {
                show: false,
              },
            },
            nameMap: nameMap,
            data: seriesData,
          },
        ],
      }

      this.chart.setOption(option)
      this.startTooltipRotation()
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    // 自动循环显示提示
    startTooltipRotation() {
      if (this.tooltipTimer) {
        clearInterval(this.tooltipTimer)
      }

      this.tooltipTimer = setInterval(() => {
        if (this.chart) {
          const dataLength = this.globData.length
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: (this.tooltipIndex - 1 + dataLength) % dataLength,
          })
          this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: this.tooltipIndex,
          })
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.tooltipIndex,
          })
          this.tooltipIndex = (this.tooltipIndex + 1) % dataLength
        }
      }, 2000)
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.tooltipTimer) {
      clearInterval(this.tooltipTimer)
    }
  },
  watch: {
    $route() {
      this.resizeChart()
    },
  },
}
</script>

<style scoped>
.glob-title {
  position: absolute;
  top: 2%;
  left: 0;
  width: 158.5px;
  background-image: url('../../assets/left-top/0.png');
  font-size: 14px;
  color: #ffffff;
  line-height: 28.5px;
  text-align: center;
}
</style>

接口返回的数据格式如下

image-20250211092156784

nameMap.js 文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
export const nameMap = {
  Canada: '加拿大',
  Turkmenistan: '土库曼斯坦',
  'Saint Helena': '圣赫勒拿',
  'Lao PDR': '老挝',
  Lithuania: '立陶宛',
  Cambodia: '柬埔寨',
  Ethiopia: '埃塞俄比亚',
  'Faeroe Is.': '法罗群岛',
  Swaziland: '斯威士兰',
  Palestine: '巴勒斯坦',
  Belize: '伯利兹',
  Argentina: '阿根廷',
  Bolivia: '玻利维亚',
  Cameroon: '喀麦隆',
  'Burkina Faso': '布基纳法索',
  Aland: '奥兰群岛',
  Bahrain: '巴林',
  'Saudi Arabia': '沙特阿拉伯',
  'Fr. Polynesia': '法属波利尼西亚',
  'Cape Verde': '佛得角',
  'W. Sahara': '西撒哈拉',
  Slovenia: '斯洛文尼亚',
  Guatemala: '危地马拉',
  Guinea: '几内亚',
  'Dem. Rep. Congo': '刚果（金）',
  Germany: '德国',
  Spain: '西班牙',
  Liberia: '利比里亚',
  Netherlands: '荷兰',
  Jamaica: '牙买加',
  'Solomon Is.': '所罗门群岛',
  Oman: '阿曼',
  Tanzania: '坦桑尼亚',
  'Costa Rica': '哥斯达黎加',
  'Isle of Man': '曼岛',
  Gabon: '加蓬',
  Niue: '纽埃',
  Bahamas: '巴哈马',
  'New Zealand': '新西兰',
  Yemen: '也门',
  Jersey: '泽西岛',
  Pakistan: '巴基斯坦',
  Albania: '阿尔巴尼亚',
  Samoa: '萨摩亚',
  'Czech Rep.': '捷克',
  'United Arab Emirates': '阿拉伯联合酋长国',
  Guam: '关岛',
  India: '印度',
  Azerbaijan: '阿塞拜疆',
  'N. Mariana Is.': '北马里亚纳群岛',
  Lesotho: '莱索托',
  Kenya: '肯尼亚',
  Belarus: '白俄罗斯',
  Tajikistan: '塔吉克斯坦',
  Turkey: '土耳其',
  Afghanistan: '阿富汗',
  Bangladesh: '孟加拉国',
  Mauritania: '毛里塔尼亚',
  'Dem. Rep. Korea': '朝鲜',
  'Saint Lucia': '圣卢西亚',
  'Br. Indian Ocean Ter.': '英属印度洋领地',
  Mongolia: '蒙古国',
  France: '法国',
  'Cura?ao': '库拉索岛',
  'S. Sudan': '南苏丹',
  Rwanda: '卢旺达',
  Slovakia: '斯洛伐克',
  Somalia: '索马里',
  Peru: '秘鲁',
  Vanuatu: '瓦努阿图',
  Norway: '挪威',
  Malawi: '马拉维',
  Benin: '贝宁',
  'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
  Korea: '韩国',
  Singapore: '新加坡',
  Montenegro: '黑山',
  'Cayman Is.': '开曼群岛',
  Togo: '多哥',
  China: '中国',
  'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
  Armenia: '亚美尼亚',
  'Falkland Is.': '马尔维纳斯群岛（福克兰）',
  Ukraine: '乌克兰',
  Ghana: '加纳',
  Tonga: '汤加',
  Finland: '芬兰',
  Libya: '利比亚',
  'Dominican Rep.': '多米尼加',
  Indonesia: '印度尼西亚',
  Mauritius: '毛里求斯',
  'Eq. Guinea': '赤道几内亚',
  Sweden: '瑞典',
  Vietnam: '越南',
  Mali: '马里',
  Russia: '俄罗斯',
  Bulgaria: '保加利亚',
  'United States': '美国',
  Romania: '罗马尼亚',
  Angola: '安哥拉',
  Chad: '乍得',
  'South Africa': '南非',
  Fiji: '斐济',
  Liechtenstein: '列支敦士登',
  Malaysia: '马来西亚',
  Austria: '奥地利',
  Mozambique: '莫桑比克',
  Uganda: '乌干达',
  Japan: '日本',
  Niger: '尼日尔',
  Brazil: '巴西',
  Kuwait: '科威特',
  Panama: '巴拿马',
  Guyana: '圭亚那合作共和国',
  Madagascar: '马达加斯加',
  Luxembourg: '卢森堡',
  'American Samoa': '美属萨摩亚',
  Andorra: '安道尔',
  Ireland: '爱尔兰',
  Italy: '意大利',
  Nigeria: '尼日利亚',
  'Turks and Caicos Is.': '特克斯和凯科斯群岛',
  Ecuador: '厄瓜多尔',
  'U.S. Virgin Is.': '美属维尔京群岛',
  Brunei: '文莱',
  Australia: '澳大利亚',
  Iran: '伊朗',
  Algeria: '阿尔及利亚',
  'El Salvador': '萨尔瓦多',
  "Côte d'Ivoire": '科特迪瓦',
  Chile: '智利',
  'Puerto Rico': '波多黎各',
  Belgium: '比利时',
  Thailand: '泰国',
  Haiti: '海地',
  Iraq: '伊拉克',
  'S?o Tomé and Principe': '圣多美和普林西比',
  'Sierra Leone': '塞拉利昂',
  Georgia: '格鲁吉亚',
  Denmark: '丹麦',
  Philippines: '菲律宾',
  'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
  Moldova: '摩尔多瓦',
  Morocco: '摩洛哥',
  Namibia: '纳米比亚',
  Malta: '马耳他',
  'Guinea-Bissau': '几内亚比绍',
  Kiribati: '基里巴斯',
  Switzerland: '瑞士',
  Grenada: '格林纳达',
  Seychelles: '塞舌尔',
  Portugal: '葡萄牙',
  Estonia: '爱沙尼亚',
  Uruguay: '乌拉圭',
  'Antigua and Barb.': '安提瓜和巴布达',
  Lebanon: '黎巴嫩',
  Uzbekistan: '乌兹别克斯坦',
  Tunisia: '突尼斯',
  Djibouti: '吉布提',
  Greenland: '丹麦',
  'Timor-Leste': '东帝汶',
  Dominica: '多米尼克',
  Colombia: '哥伦比亚',
  Burundi: '布隆迪',
  'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
  Cyprus: '塞浦路斯',
  Barbados: '巴巴多斯',
  Qatar: '卡塔尔',
  Palau: '帕劳',
  Bhutan: '不丹',
  Sudan: '苏丹',
  Nepal: '尼泊尔',
  Micronesia: '密克罗尼西亚',
  Bermuda: '百慕大',
  Suriname: '苏里南',
  Venezuela: '委内瑞拉',
  Israel: '以色列',
  'St. Pierre and Miquelon': '圣皮埃尔和密克隆群岛',
  'Central African Rep.': '中非共和国',
  Iceland: '冰岛',
  Zambia: '赞比亚',
  Senegal: '塞内加尔',
  'Papua New Guinea': '巴布亚新几内亚',
  'Trinidad and Tobago': '特立尼达和多巴哥',
  Zimbabwe: '津巴布韦',
  Jordan: '约旦',
  Gambia: '冈比亚',
  Kazakhstan: '哈萨克斯坦',
  Poland: '波兰',
  Eritrea: '厄立特里亚',
  Kyrgyzstan: '吉尔吉斯斯坦',
  Montserrat: '蒙特塞拉特',
  'New Caledonia': '新喀里多尼亚',
  Macedonia: '马其顿',
  Paraguay: '巴拉圭',
  Latvia: '拉脱维亚',
  Hungary: '匈牙利',
  Syria: '叙利亚',
  Honduras: '洪都拉斯',
  Myanmar: '缅甸',
  Mexico: '墨西哥',
  Egypt: '埃及',
  Nicaragua: '尼加拉瓜',
  Cuba: '古巴',
  Serbia: '塞尔维亚',
  Comoros: '科摩罗',
  'United Kingdom': '英国',
  'Fr. S. Antarctic Lands': '南极洲',
  Congo: '刚果（布）',
  Greece: '希腊',
  'Sri Lanka': '斯里兰卡',
  Croatia: '克罗地亚',
  Botswana: '博茨瓦纳',
  'Siachen Glacier': '锡亚琴冰川地区',
}