forked from SunsonMiddleSchool/2018class10-Graduation-Map
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
346 lines (325 loc) · 16.6 KB
/
index.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
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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>神奇五班在哪里</title>
</head>
<body style='margin: 0'>
<div id='map' style='width:100vw;height: 95vh;'></div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
<script src='/js/highmaps.js'></script>
<script src='/js/drilldown.js'></script>
<script src='/js/nunjucks.min.js'></script>
<script src='/js/china.js'></script>
<script src='/js/zhejiang.js'></script>
<script src='/js/beijing.js'></script>
<script src='/js/jiangsu.js'></script>
<script src='/js/neimenggu.js'></script>
<script src='/js/guangdong.js'></script>
<script src='/js/tianjin.js'></script>
<script src='/js/hebei.js'></script>
<script src='/js/shanxi.js'></script>
<script src='/js/liaoning.js'></script>
<script src='/js/jilin.js'></script>
<script src='/js/heilongjiang.js'></script>
<script src='/js/shanghai.js'></script>
<script src='/js/anhui.js'></script>
<script src='/js/fujian.js'></script>
<script src='/js/jiangxi.js'></script>
<script src='/js/shandong.js'></script>
<script src='/js/henan.js'></script>
<script src='/js/hubei.js'></script>
<script src='/js/hunan.js'></script>
<script src='/js/guangxi.js'></script>
<script src='/js/hainan.js'></script>
<script src='/js/chongqing.js'></script>
<script src='/js/sichuan.js'></script>
<script src='/js/guizhou.js'></script>
<script src='/js/yunnan.js'></script>
<script src='/js/xizang.js'></script>
<script src='/js/shaanxi.js'></script>
<script src='/js/gansu.js'></script>
<script src='/js/qinghai.js'></script>
<script src='/js/ningxia.js'></script>
<script src='/js/xinjiang.js'></script>
<script>
//定义一个函数判断是手机端还是pc端
function isMobile() {
if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
return true; // 移动端
} else {
return false; // PC端
}
}
const provincePoems = {
'湖南': "醉后不知天在水，满船清梦压星河。",
'湖北': "山随平野尽，江入大荒流。",
'河南': "白玉谁家郎，回车渡天津。看花东陌上，惊动洛阳人。",
'山东': "会当凌绝顶，一览众山小。",
'江苏': "月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。",
'浙江': "东南形胜，三吴都会，钱塘自古繁华。",
'上海': "落日西风见沪城，瓶山终古峙峥嵘。",
'安徽': "五岳归来不看山，黄山归来不看岳。",
'江西': "物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。",
'福建': "朱楼四面钩疏箔，卧看千山急雨来。",
'北京': "前不见古人，后不见来者。念天地之悠悠，独怆然而涕下！",
'天津': "津门极望气蒙蒙，泛地浮天海势东。",
'河北': "日月之行，若出其中；星汉灿烂，若出其里。",
'山西': "君不见，黄河之水天上来，奔流到海不复回。",
'内蒙古': "天苍苍，野茫茫，风吹草低见牛羊。",
'陕西': "九天阊阖开宫殿，万国衣冠拜冕旒。",
'甘肃': "黄河远上白云间，一片孤城万仞山。羌笛何须怨杨柳，春风不度玉门关。",
'青海': "青海长云暗雪山，孤城遥望玉门关。黄沙百战穿金甲，不破楼兰终不还。",
'宁夏': "大漠孤烟直，长河落日圆。",
'重庆': "两岸猿声啼不住，轻舟已过万重山。",
'四川': "连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。",
'云南': "天气常如二三月，花枝不断四时春。",
'贵州': "旧说天下山，半在黔中青。又闻天下泉，半落黔中鸣。",
'西藏': "半岩晦云雪，高顶澄烟霞。朝昏对宾馆，隐映如仙家。",
'新疆': "明月出天山，苍茫云海间。",
'黑龙江': "东去大江水，高源何处来。混同天一色，长白雪千堆。",
'吉林': "长白雄东北，嵯峨俯塞州。",
'辽宁': "相思不相见，托梦辽城东。",
'广东': "日啖荔枝三百颗，不辞长作岭南人。",
'广西': "桂林山水甲天下，玉碧罗青意可参。",
'海南': "海上去应远，蛮家云岛孤。竹船来桂浦，山市买鱼须。",
'香港': "方丈三神地，诸侯百里封。居然成重镇，高垒矗狼烽。",
'澳门': "不觉如丝戏海龙，大鱼春涨吐芙蓉。千金一片浑间事，愿得为云护九重。",
'台湾': "田横尚有三千容，茹苦间关不忍离。"
};
let students = [
{ name: '陈锦涵', city: '沈阳', province: '辽宁', school: '中国刑事警察学院' },
{ name: '沙圣为', city: '南京', province: '江苏', school: '南京信息工程大学' },
{ name: '马畅', city: '长春', province: '吉林', school: '吉林大学' },
{ name: '王盛', city: '青岛', province: '山东', school: '英国海洋大学（青岛）' },
{ name: '朱朝晖', city: '威海', province: '山东', school: '山东大学（威海）' },
{ name: '李昱霖', city: '西安', province: '陕西', school: '西北工业大学' },
{ name: '王振一', city: '长沙', province: '湖南', school: '中南大学' },
{ name: '潘晨阳', city: '长春', province: '吉林', school: '吉林大学' },
{ name: '张天恩', city: '西青区', province: '天津', school: '天津工业大学' },
{ name: '张展', city: '济南', province: '山东', school: '山东大学' },
{ name: '李泽宇', city: '海淀区', province: '北京', school: '北京科技大学' },
{ name: '张洋铭', city: '大连', province: '辽宁', school: '大连理工大学' },
{ name: '汪圣康', city: '大连', province: '辽宁', school: '大连理工大学' },
{ name: '康晨', city: '西安', province: '陕西', school: '长安大学' },
{ name: '魏驰', city: '济南', province: '山东', school: '山东大学' },
{ name: '肖冠霖', city: '济南', province: '山东', school: '山东第一医科大学' },
{ name: '郑皓文', city: '泰安', province: '山东', school: '山东农业大学' },
{ name: '张子轩', city: '哈尔滨', province: '黑龙江', school: '哈尔滨工程大学' },
{ name: '张晏宁', city: '北碚区', province: '重庆', school: '西南大学' },
{ name: '仝家川', city: '济南', province: '山东', school: '山东大学' },
{ name: '刘天宇', city: '济南', province: '山东', school: '山东大学' },
{ name: '李佳凝', city: '青岛', province: '山东', school: '中国海洋大学' },
{ name: '李志全', city: '长春', province: '吉林', school: '吉林大学' },
{ name: '宗美琦', city: '合肥', province: '安徽', school: '合肥工业大学' },
{ name: '王国淇', city: '青岛', province: '山东', school: '山东大学' },
{ name: '陈思远', city: '合肥', province: '安徽', school: '合肥工业大学' },
{ name: '宋子墨', city: '济南', province: '山东', school: '山东大学' },
{ name: '王梓群', city: '济南', province: '山东', school: '山东财经大学' },
{ name: '张家浩', city: '济南', province: '山东', school: '山东财经大学' },
{ name: '孙艺鸣', city: '成都', province: '四川', school: '四川大学' },
{ name: '刘家豪', city: '郑州', province: '河南', school: '战略支援部队信息工程大学' },
{ name: '崔亚鹏', city: '成都', province: '四川', school: '成都理工大学' },
{ name: '秦北辰', city: '哈尔滨', province: '黑龙江', school: '哈尔滨工程大学' },
{ name: '孟祉含', city: '咸阳', province: '陕西', school: '西北农林科技大学' },
{ name: '何宇航', city: '牡丹江', province: '黑龙江', school: '牡丹江医科大学' },
{ name: '张华为', city: '大连', province: '辽宁', school: '大连理工大学' },
{ name: '秦琳然', city: '南京', province: '江苏', school: '南京信息工程大学' },
{ name: '吕浩然', city: '济南', province: '山东', school: '山东第一医科大学' },
{ name: '林宗硕', city: '成都', province: '四川', school: '西南交通大学' },
{ name: '许佳淑', city: '烟台', province: '山东', school: '滨州医学院' },
{ name: '田天', city: '威海', province: '山东', school: '山东大学（威海）' },
{ name: '王宏哲', city: '哈尔滨', province: '黑龙江', school: '哈尔滨工程大学' },
{ name: '马睿', city: '济南', province: '山东', school: '山东大学' },
{ name: '张桢溥', city: '青岛', province: '山东', school: '中国海洋大学' },
{ name: '杜杨淇', city: '西安', province: '陕西', school: '西安电子科技大学' },
{ name: '马凯', city: '青岛', province: '山东', school: '青岛大学' },
{ name: '窦子晴', city: '昆明', province: '云南', school: '昆明医科大学' },
{ name: '齐小雅', city: '昆明', province: '云南', school: '云南大学' },
{ name: '陈阳', city: '聊城', province: '山东', school: '聊城大学' },
{ name: '王艺榕', city: '济南', province: '山东', school: '山东第一医科大学' },
{ name: '武宇哲', city: '哈尔滨', province: '黑龙江', school: '东北石油大学' },
{ name: '樊祥凯', city: '济南', province: '山东', school: '山东师范大学' },
{ name: '苏菡', city: '济南', province: '山东', school: '山东科技大学' },
{ name: '李小禾', city: '济南', province: '山东', school: '山东理工大学' },
{ name: '苏育甲', city: '武汉', province: '湖北', school: '中国地质大学' }
];
let data = Highcharts.geojson(Highcharts.maps['cn/china']);
let provinces = {};
Highcharts.each(data, function (d) {
provinces[d.name] = d;
d.drilldown = d.name;
d.value = 0;
d.cities = {};
d.people = [];
});
for (let s of students) {
provinces[s.province].value++;
provinces[s.province].people.push(s)
}
for (let p of Object.values(provinces)) {
let filename = p.properties.filename;
if (!Highcharts.maps[`cn/${filename}`]) {
continue
}
let subData = p.subData = Highcharts.geojson(Highcharts.maps[`cn/${filename}`]);
Highcharts.each(subData, function (city) {
p.cities[city.name] = city;
city.value = 0;
city.people = [];
});
for (let s of students) {
if (p.cities[s.city] !== undefined) {
p.cities[s.city].value++;
p.cities[s.city].people.push(s);
}
}
}
function makeSeries() {
let series = [];
for (let p of Object.values(provinces)) {
if (p.subData) {
series.push({
id: p.name,
name: p.name,
data: p.subData,
dataLabels: {
enabled: true,
format: '{point.name}'
}
})
}
}
return series;
}
function formatter() {
let template = `
<div class="tooltip">
<div class="series">{{series}}</div>
<div class="profile">
<div class="name">{{name}}:</div>
<div class="value">{{value}}人</div>
</div>
<div class="list">
{% for p in people %}
<div class="pinfo">
<div class="pname">{{p.name}}</div>
<div class="city">{{p.city}}</div>
<div class="school">{{p.school}}</div>
</div>
{% endfor %}
</div>
</div>
`;
return nunjucks.renderString(template, {
name: this.point.name,
series: this.series.name,
value: this.point.value,
people: this.point.people
});
}
// 初始化图表
let map = new Highcharts.Map('map', {
chart: {
backgroundColor: 'azure',
events: {
drilldown: function (e) {
let name = e.point.name;
this.setTitle(null, { text: name + "<br><i>“" + provincePoems[name] });
},
drillup: function () {
data = Highcharts.maps['cn/china'];
this.setTitle(null, {
text: '中国<br>*另有梁浩同学在印第斯安纳州，普渡大学(Purdue University West Lafayette)就读'
});
}
}
},
title: {
text: '神奇五班在哪里',
style: { "font-family": "serif", "color": "#333333", "fontSize": "24px", "fontWeight": "bold" }
},
subtitle: {
text: '中国<br>*另有梁浩同学在印第斯安纳州，普渡大学(Purdue University West Lafayette)就读',
floating: true,
y: 50,
style: {
fontSize: '17px'
}
},
tooltip: {
useHTML: true,
backgroundColor: '#357fee',
borderRadius: 10,
padding: 12,
style: {
'color': '#dddddd',
'cursor': 'default',
'fontSize': (isMobile() ? '25px' : '18px'),
'pointerEvents': 'none',
'whiteSpace': 'nowrap'
},
formatter: formatter,
positioner: function () {
return { x: 0, y: 100 };
}
},
colorAxis: {
min: 0,
max: 20,
type: 'linear',
minColor: '#ffffff',
maxColor: '#357fee',
stops: [
[0, '#ffffff'],
[1, '#357fee']
]
},
series: [{
data: data,
name: '各省人数',
joinBy: 'name',
tooltip: {
pointFormat: `{point.name}: {point.value}`
}
}],
drilldown:
{
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration:
'none',
textShadow:
'0 0 3px #000000'
}
,
drillUpButton: {
relativeTo: 'spacingBox',
position:
{
x: 0,
y:
60
}
}
,
series: makeSeries()
}
,
mapNavigation: {
enabled: true,
buttonOptions:
{
verticalAlign: 'bottom'
}
}
})
;
</script>
</body>
<div id="container" style="font-size: large; text-align: center; background-color:azure; height: 100%; width: 100%;">
<div style="color:crimson; font-size: x-large;">不要忘记我们的老师们：<br></div>
英语/班主任：沈秋华 数学：李红娟 语文：薛冬冬<br>
物理：任鸣龙 化学：朱路群 生物：郭龙学<br>
</div>
</html>