Echarts-（八）Echarts的地图图表

本文最后更新于：December 3, 2021 pm

Apache ECharts一个基于 JavaScript 的开源可视化图表库。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

目录

推荐学习时，多看看官方文档。

官方文档

1.基本实现

首先，需要准备中国地图的JSON格式的数据。这里所有数据都已经打包，包括后面需要的都在里面。

步骤：

  1. 加载矢量地图数据。
  2. 通过registerMap注册到echarts全局对象中。
  3. 指明geo配置下的type和map属性。
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一天-地图图表</title>
		<script src="echarts.min.js"></script>
		<script src="./jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="echarts" style="width: 100%;height: 400px;"></div>
		<script type="text/javascript">
		
			var myec = echarts.init(document.getElementById('echarts'))
			
			//使用Ajax获取矢量地图数据
			$.get('mapData/china.json',function(ret){
				// console.log(ret)
				//将得到的矢量地图数据ret，进行注册地图矢量数据
				echarts.registerMap('chinaMap',ret) //
				var option={
					geo:{ //和之前的series类似
						type: 'map',
						map: 'chinaMap' //与上面注册的名称要一致
					}
				}
				myec.setOption(option);
			})
		</script>
	</body>
</html>

与之前的是有一点区别的。

2.拖动与缩放地图（roam）

允许缩放以及拖动地图。

1
2
3
4
5
geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true
					}

3.名称显示（label）

1
2
3
4
5
6
7
8
geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label:{
							show: true
						}
					}

4.初始缩放比例（zoom）

1
2
3
4
5
6
7
8
9
geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label:{
							show: true
						},
						zoom: 2 
					}

5.设置中心（center）

是设置相对于盒子的中心，需要的参数是经纬度。

1
2
3
4
5
6
7
8
9
10
geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label:{
							show: true
						},
						zoom: 1,
						center: [87.617733,43.792818] //新疆。设置地图中心点
					}

可自行将盒子设置点边框和颜色，这样效果比较明显。

6.常见效果

6.1 不同城市不同颜色

用于不同城市空气质量程度表示。

  1. 城市的空气质量数据设置给series。
  2. 将series下的数据和geo关联起来。通过geoIndex、type。
  3. 结合visualMap配合使用

完整代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一天-地图图表</title>
		<script src="./echarts.min.js"></script>
		<script src="./jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="echarts" style="width: 100%;height: 400px;"></div>
		<script type="text/javascript">
		
			var myec = echarts.init(document.getElementById('echarts'))
			
			var airData = [
			      { name: '北京', value: 39.92 },
			      { name: '天津', value: 39.13 },
			      { name: '上海', value: 31.22 },
			      { name: '重庆', value: 66 },
			      { name: '河北', value: 147 },
			      { name: '河南', value: 113 },
			      { name: '云南', value: 25.04 },
			      { name: '辽宁', value: 50 },
			      { name: '黑龙江', value: 114 },
			      { name: '湖南', value: 175 },
			      { name: '安徽', value: 117 },
			      { name: '山东', value: 92 },
			      { name: '新疆', value: 84 },
			      { name: '江苏', value: 67 },
			      { name: '浙江', value: 84 },
			      { name: '江西', value: 96 },
			      { name: '湖北', value: 273 },
			      { name: '广西', value: 59 },
			      { name: '甘肃', value: 99 },
			      { name: '山西', value: 39 },
			      { name: '内蒙古', value: 58 },
			      { name: '陕西', value: 61 },
			      { name: '吉林', value: 51 },
			      { name: '福建', value: 29 },
			      { name: '贵州', value: 71 },
			      { name: '广东', value: 38 },
			      { name: '青海', value: 57 },
			      { name: '西藏', value: 24 },
			      { name: '四川', value: 58 },
			      { name: '宁夏', value: 52 },
			      { name: '海南', value: 54 },
			      { name: '台湾', value: 88 },
			      { name: '香港', value: 66 },
			      { name: '澳门', value: 77 },
			      { name: '南海诸岛', value: 55 }
			    ]
			
			$.get('mapData/china.json',function(ret){
				// console.log(ret)
				echarts.registerMap('chinaMap',ret)
				var option={
					geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label:{
							show: true
						}
					},
					series: [
						{
						data: airData,
						geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起（具体根据实际情况而定）
						type: 'map'
						}
					],
					visualMap: {
						min: 0, //空气质量的最小值
						max: 300, //空气质量的最大值
						inRange: {
							color: ['white','red'] //控制颜色渐变范围
						},
						calculable: true //控制左下角渐变色的滑块
					}
				}
				myec.setOption(option);
			})
		</script>
	</body>
</html>

6.2 地图和散点图结合

  1. 给series下增加新的对象。
  2. 将散点数据设置给新对象的data。
  3. 配置新对象的type：effectScatter。
  4. 让散点图使用地图坐标系统。coordinateSystem：’geo‘。
  5. 让涟漪效果更明显。rippleEffect：{scale：10}

在上一个效果的基础上添加即可。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一天-地图与散点图</title>
		<script src="./echarts.min.js"></script>
		<script src="./jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="echarts" style="width: 100%;height: 400px;"></div>
		<script type="text/javascript">
		
			var sct = [
				{
					value: [117.283042,31.86119]
				}
			]
		
			var myec = echarts.init(document.getElementById('echarts'))
			
			var airData = [
			      { name: '北京', value: 39.92 },
			      { name: '天津', value: 39.13 },
			      { name: '上海', value: 31.22 },
			      { name: '重庆', value: 66 },
			      { name: '河北', value: 147 },
			      { name: '河南', value: 113 },
			      { name: '云南', value: 25.04 },
			      { name: '辽宁', value: 50 },
			      { name: '黑龙江', value: 114 },
			      { name: '湖南', value: 175 },
			      { name: '安徽', value: 117 },
			      { name: '山东', value: 92 },
			      { name: '新疆', value: 84 },
			      { name: '江苏', value: 67 },
			      { name: '浙江', value: 84 },
			      { name: '江西', value: 96 },
			      { name: '湖北', value: 273 },
			      { name: '广西', value: 59 },
			      { name: '甘肃', value: 99 },
			      { name: '山西', value: 39 },
			      { name: '内蒙古', value: 58 },
			      { name: '陕西', value: 61 },
			      { name: '吉林', value: 51 },
			      { name: '福建', value: 29 },
			      { name: '贵州', value: 71 },
			      { name: '广东', value: 38 },
			      { name: '青海', value: 57 },
			      { name: '西藏', value: 24 },
			      { name: '四川', value: 58 },
			      { name: '宁夏', value: 52 },
			      { name: '海南', value: 54 },
			      { name: '台湾', value: 88 },
			      { name: '香港', value: 66 },
			      { name: '澳门', value: 77 },
			      { name: '南海诸岛', value: 55 }
			    ]
			
			$.get('mapData/china.json',function(ret){
				// console.log(ret)
				echarts.registerMap('chinaMap',ret)
				var option={
					geo:{
						type: 'map',
						map: 'chinaMap',
						roam: true,
						label:{
							show: true
						}
					},
					series: [
						{
						data: airData,
						geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起（具体根据实际情况而定）
						type: 'map'
						},
						{
							data: sct,
							type: 'effectScatter',
							coordinateSystem: 'geo', //让散点图使用地图坐标系统
							rippleEffect: {
								scale: 10
							}
						}
					],
					visualMap: {
						min: 0,
						max: 300,
						inRange: {
							color: ['white','red'] //控制颜色渐变范围
						},
						calculable: true //控制左下角渐变色的滑块
					}
				}
				myec.setOption(option);
			})
		</script>
	</body>
</html>