https://blog.csdn.net/a805814077/article/details/109058738
这里主要对这个官网案例进行讲解：
https://echarts.apache.org/examples/en/editor.html?c=map-usa
完整项目包文件下载（包含echarts.min.js与USA.json文件；注意如果用自己的echarts文件，需要地图组件才可以绘制出来）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>USA Map</title>
</head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<body>
<div id="USAMap" style="width: 1600px;height:800px;"></div>
</body>
<script>
// 美国地图
USAMap();
function USAMap() {
var myChart = echarts.init(document.getElementById("USAMap"));
// 开启加载loading的动画
myChart.showLoading();
// jquery读取json文件
$.get('geo/USA.json', function (usaJson) {
// 隐藏loading的动画
myChart.hideLoading();
echarts.registerMap('USA', usaJson, {
// 把阿拉斯加移到美国主大陆左下方
Alaska: {
left: -131,
top: 25,
width: 15
},
// 夏威夷
Hawaii: {
left: -110,
top: 28,
width: 5
},
// 波多黎各（因为名字有空格，所以写为字符串的形式）
'Puerto Rico': {
left: -76,
top: 26,
width: 2
}
});
option = {
title: {
text: 'USA Population Estimates (2012)',
subtext: 'Data from www.census.gov',
sublink: 'http://www.census.gov/popest/data/datasets.html',
left: 'right'
},
// 提示框组件
tooltip: {
trigger: 'item',
// 浮层显示的延迟
showDelay: 0,
// 提示框浮层的移动动画过渡时间
transitionDuration: 0.2,
// 按要求的格式显示提示框
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
// 可视映射
visualMap: {
left: 'right',
min: 500000,
max: 38000000,
// 颜色区间
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
// 文本，默认为数值文本
text: ['High', 'Low'],
// 显示拖拽用的手柄
calculable: true
},
// 工具盒
toolbox: {
show: true,
//orient: 'vertical',
left: 'left',
top: 'top',
feature: {
// 数据视图
dataView: {readOnly: false},
// 还原
restore: {},
// 保存为图片
saveAsImage: {}
}
},
series: [
{
name: 'USA PopEstimates',
type: 'map',
// 开启鼠标缩放和平移漫游
roam: true,
map: 'USA',
// 显示标签
emphasis: {
label: {
show: true
}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data: [
{name: 'Alabama', value: 4822023},
{name: 'Alaska', value: 731449},
{name: 'Arizona', value: 6553255},
{name: 'Arkansas', value: 2949131},
{name: 'California', value: 38041430},
{name: 'Colorado', value: 5187582},
{name: 'Connecticut', value: 3590347},
{name: 'Delaware', value: 917092},
{name: 'District of Columbia', value: 632323},
{name: 'Florida', value: 19317568},
{name: 'Georgia', value: 9919945},
{name: 'Hawaii', value: 1392313},
{name: 'Idaho', value: 1595728},
{name: 'Illinois', value: 12875255},
{name: 'Indiana', value: 6537334},
{name: 'Iowa', value: 3074186},
{name: 'Kansas', value: 2885905},
{name: 'Kentucky', value: 4380415},
{name: 'Louisiana', value: 4601893},
{name: 'Maine', value: 1329192},
{name: 'Maryland', value: 5884563},
{name: 'Massachusetts', value: 6646144},
{name: 'Michigan', value: 9883360},
{name: 'Minnesota', value: 5379139},
{name: 'Mississippi', value: 2984926},
{name: 'Missouri', value: 6021988},
{name: 'Montana', value: 1005141},
{name: 'Nebraska', value: 1855525},
{name: 'Nevada', value: 2758931},
{name: 'New Hampshire', value: 1320718},
{name: 'New Jersey', value: 8864590},
{name: 'New Mexico', value: 2085538},
{name: 'New York', value: 19570261},
{name: 'North Carolina', value: 9752073},
{name: 'North Dakota', value: 699628},
{name: 'Ohio', value: 11544225},
{name: 'Oklahoma', value: 3814820},
{name: 'Oregon', value: 3899353},
{name: 'Pennsylvania', value: 12763536},
{name: 'Rhode Island', value: 1050292},
{name: 'South Carolina', value: 4723723},
{name: 'South Dakota', value: 833354},
{name: 'Tennessee', value: 6456243},
{name: 'Texas', value: 26059203},
{name: 'Utah', value: 2855287},
{name: 'Vermont', value: 626011},
{name: 'Virginia', value: 8185867},
{name: 'Washington', value: 6897012},
{name: 'West Virginia', value: 1855413},
{name: 'Wisconsin', value: 5726398},
{name: 'Wyoming', value: 576412},
{name: 'Puerto Rico', value: 3667084}
]
}
]
};
myChart.setOption(option);
});
}
</script>
</html>
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
————————————————
版权声明：本文为CSDN博主「DanielMaster」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a805814077/article/details/109058738
