Vue3 + Echarts(5.x) 实现中国地图

Echarts展示地图

效果图

安装

npm install echarts
1

默认安装的是 5.x 版本

在这个版本中的引入方式必须是下面这种方法

import * as echarts from 'echarts'
1

源码

在echarts5.x版本中，已经不再提供地图数据，所以需要我们自己手动下载，我这里已经提供好了下载地址

提前准备好地图数据 china.js

下载链接：https://pan.quark.cn/s/9410ce68ed9d

然后下面是地图实现源码

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

cityPostion.js 文件代码，这个文件主要是通过省份名称获取经纬度

const positionArr = [
  { name: '北京', value: ['116.3979471', '39.9081726'] },
  { name: '上海', value: ['121.4692688', '31.2381763'] },
  { name: '天津', value: ['117.2523808', '39.1038561'] },
  { name: '重庆', value: ['106.548425', '29.5549144'] },
  { name: '河北', value: ['114.4897766', '38.0451279'] },
  { name: '山西', value: ['112.5223053', '37.8357424'] },
  { name: '辽宁', value: ['123.4116821', '41.7966156'] },
  { name: '吉林', value: ['125.3154297', '43.8925629'] },
  { name: '黑龙江', value: ['126.6433411', '45.7414932'] },
  { name: '浙江', value: ['120.1592484', '30.265995'] },
  { name: '福建', value: ['119.2978134', '26.0785904'] },
  { name: '山东', value: ['117.0056', '36.6670723'] },
  { name: '河南', value: ['113.6500473', '34.7570343'] },
  { name: '湖北', value: ['114.2919388', '30.5675144'] },
  { name: '湖南', value: ['112.9812698', '28.2008247'] },
  { name: '广东', value: ['113.2614288', '23.1189117'] },
  { name: '海南', value: ['110.3465118', '20.0317936'] },
  { name: '四川', value: ['104.0817566', '30.6610565'] },
  { name: '贵州', value: ['106.7113724', '26.5768738'] },
  { name: '云南', value: ['102.704567', '25.0438442'] },
  { name: '江西', value: ['115.8999176', '28.6759911'] },
  { name: '陕西', value: ['108.949028', '34.2616844'] },
  { name: '青海', value: ['101.7874527', '36.6094475'] },
  { name: '甘肃', value: ['103.7500534', '36.0680389'] },
  { name: '广西', value: ['108.3117676', '22.8065434'] },
  { name: '新疆', value: ['87.6061172', '43.7909393'] },
  { name: '内蒙古', value: ['111.6632996', '40.8209419'] },
  { name: '西藏', value: ['91.1320496', '29.657589'] },
  { name: '宁夏', value: ['106.2719421', '38.4680099'] },
  { name: '台湾', value: ['120.9581316', '23.8516062'] },
  { name: '香港', value: ['114.139452', '22.391577'] },
  { name: '澳门', value: ['113.5678411', '22.167654'] },
  { name: '安徽', value: ['117.2757034', '31.8632545'] },
  { name: '江苏', value: ['118.7727814', '32.0476151'] },
]

export function getCityPositionByName(name) {
  return positionArr.find(item => item.name === name)
}
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