使用 Echarts 插件完成中国地图

前言：

大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

---

什么是 Echarts 插件

echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果

---

中国地图成品展示

---

步骤：

• 1. 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save
1

• 2. 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts
1
2
3
4

• 3. 在js中使用需要进行的步骤：

引入中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下

1. 先设置一个显示的标签

2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12

注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
地图分为：世界地图，中国地图，省份地图，市区地图

下面代码的意思，可以跳转至官方网站进行查看

---

完成中国地图代码

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

---

总结：

以上就是 vue基于 Echarts 插件，实现中国地图功能，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog