Echarts3——绘制世界地图中其他地方到中国城市
2018-02-07 09:29
633 查看
做完的最终效果如图所示（使用了三种效果叠加而成）：
第一种效果
第二种效果
第三种效果
echarts.js 下载链接
world.js/world.json 下载链接
城市经纬度 获取方法
2
3
4
5
2
3
4
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
由于一开始不了解echarts的使用方式，以及他们的api文档，就这破东西花了我好几天的时间去理解，找了不少文章，一开始还以为要用geoJson去将世界地图跟中国各个省的经纬度合在一起，然后就忙着找相关的json找了半天，还对着geojson的网站研究了半天，再后来json文件找到了，geojson也会用来绘制svg图像了，然并卵（最终都没有用到）。通过下面链接就可以直接下载:
世界地图+中国省份json文件 (http://blog.csdn.net/dream361/article/details/52744243)
第一种效果
第二种效果
第三种效果
准备工作
echarts.js 下载链接world.js/world.json 下载链接
城市经纬度 获取方法
1. 引入相关文件
<!-- 引入echart.js, 3.0的版本 --> <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script> <!-- 引入世界地图，上面链接可以下载，也可以用相关的json文件 --> <script src="js/world.js" type="text/javascript" charset="utf-8"></script>1
2
3
4
5
2. html部分，DOM容器
<body> <!-- 可以自定义设置宽高，以及背景图 --> <div id="main" style="width: 100%;height:100vh;"></div> </body>1
2
3
4
3. js部分（核心部分，详解）
<script>
// 获取echarts的容器
var chart = echarts.init(document.getElementById("main"));
/*
图中相关城市经纬度,根据你的需求添加数据
关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {
'南宁': [108.479, 23.1152],
'广州': [113.5107, 23.2196],
'重庆': [107.7539, 30.1904],
'芬兰': [24.909912, 60.169095],
'美国': [-100.696295, 33.679979],
'日本': [139.710164, 35.706962],
'韩国': [126.979208, 37.53875],
'瑞士': [7.445147, 46.956241],
'东南亚': [117.53244, 5.300343],
'澳大利亚': [135.193845, -25.304039],
'德国': [13.402393, 52.518569],
'英国': [-0.126608, 51.208425],
'加拿大': [-102.646409, 59.994255]
};
/*
记录下起点城市和终点城市的名称，以及权重
数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
*/
// 重庆
var CQData = [
[{name: '重庆'}, {name: "芬兰",value: 30}],
[{name: '重庆'}, {name: "德国",value: 90}],
[{name: '重庆'}, {name: "英国",value: 30}],
[{name: '重庆'}, {name: "韩国",value: 30}]
];
// 广州
var GZData = [
[{name: '广州'}, {name: "日本",value: 30}],
[{name: '广州'}, {name: "东南亚",value: 30}]
];
// 南宁
var NNData = [
[{name: '南宁'}, {name: "加拿大",value: 30}],
[{name: '南宁'}, {name: "美国",value: 100}],
[{name: '南宁'}, {name: "澳大利亚",value: 95}],
[{name: '南宁'}, {name: "瑞士",value: 30}]
];
// 小飞机的图标，可以用其他图形替换
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
// 获取地图中起点和终点的坐标，以数组形式保存下来
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord // 起点坐标
}, {
coord: toCoord // 终点坐标
}])
}
}
return res;
}
var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
var series = []; // 用来存储地图数据
/*
图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['重庆', CQData],['广州', GZData],['南宁', NNData]].forEach(function(item, i) {
series.push({
// 白色航线特效图
type: 'lines',
zlevel: 1, // 用于分层，z-index的效果
effect: {
show: true, // 动效是否显示
period: 6, // 特效动画时间
trailLength: 0.7, // 特效尾迹的长度
color: '#fff', // 特效颜色
symbolSize: 3 // 特效大小
},
lineStyle: {
normal: { // 正常情况下的线条样式
color: color[0],
width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
curveness: -0.2 // 线条曲度
}
},
data: convertData(item[1]) // 特效的起始、终点位置
}, { // 小飞机航线效果
type: 'lines',
zlevel: 2,
//symbol: ['none', 'arrow'], // 用于设置箭头
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
symbolSize: 15
},
lineStyle: {
normal: {
color: color[0],
width: 1,
opacity: 0.6,
curveness: -0.2
}
},
data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
}, { // 散点效果
type: 'effectScatter',
coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
zlevel: 3,
rippleEffect: {
brushType: 'stroke' // 波纹绘制效果
},
label: {
normal: { // 默认的文本标签显示样式
show: true,
position: 'left', // 标签显示的位置
formatter: '{b}' // 标签内容格式器
}
},
itemStyle: {
normal: {
color: color[0]
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name], // 起点的位置
symbolSize: dataItem[1].value / 8, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
};
})
});
});
// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[1]
}
},
data: [{
// 这里面的数据，由于一开始就知道终点位置是什么，所以直接写死，如果通过ajax来获取数据的话，还要进行相应的处理
name: "重庆",
value: [107.7539, 30.1904, 30],
label: {
normal: {
position: 'top'
}
}
}, {
name: '广州',
value: [113.5107, 23.2196, 30],
label: {
normal: {
position: 'right'
}
}
}, {
name: '南宁',
value: [108.479, 23.1152, 30]
}]
});
// 最后初始化世界地图中的相关数据
chart.setOption({
title: {
text: 'demo',
textStyle: {
color: '#fff',
fontSize: 40
},
top: '10px',
left: '10px'
},
geo: {
map: 'world', // 与引用进来的地图js名字一致
roam: false, // 禁止缩放平移
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#323c48'
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{ // 选中的区域
name: 'China',
selected: true,
itemStyle: { // 高亮时候的样式
emphasis: {
areaColor: '#7d7d7d'
}
},
label: { // 高亮的时候不显示标签
emphasis: {
show: false
}
}
}]
},
series: series, // 将之前处理的数据放到这里
textStyle: {
fontSize: 12
}
});
/* 然后就没有然后了，全剧终！ */
</script>12
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
由于一开始不了解echarts的使用方式，以及他们的api文档，就这破东西花了我好几天的时间去理解，找了不少文章，一开始还以为要用geoJson去将世界地图跟中国各个省的经纬度合在一起，然后就忙着找相关的json找了半天，还对着geojson的网站研究了半天，再后来json文件找到了，geojson也会用来绘制svg图像了，然并卵（最终都没有用到）。通过下面链接就可以直接下载:
世界地图+中国省份json文件 (http://blog.csdn.net/dream361/article/details/52744243)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Echarts3——绘制世界地图中其他地方到中国城市
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 一个Echarts绘制世界地图的示例
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- Echarts绘制中国地图
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- 数据挖掘之密度聚类---RStudio绘制中国城市密度图
- d3 在中国地图上绘制城市
- [Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
- [Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
- d3 绘制中国地图城市及城市间的连线
- Uber中国在地方城市的人员架构是怎样的？
- 使用Echarts绘制中国地图看这篇就够了（认真脸！）
- 怎样用ECharts绘制一个简单的柱形图表
- 揭秘：历史上十大被丢失的中国城市