-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1252 lines (1215 loc) · 50.4 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
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<link rel="stylesheet" href="dist/css/swiper.min.css">
<link rel="stylesheet" href="dist/css/chart.min.css">
<style type="text/css">
p.small {line-height: 50%}
p.middle {line-height: 95%;font-family:"Microsoft YaHei","Arial Narrow";}
p.big {line-height: 200%}
.content{
display:none;
width:250px;
border-radius:10px;
padding:20px;
position:absolute;
top:15px;
left:80px;
background-color:#2F4056;
z-index:9;
cursor:pointer
}
.content1{
width:500px;
border-radius:10px;
padding:20px;
position:absolute;
top:15px;
left:70%;
background-color:#2F4056;
z-index:9;
cursor:pointer
}
.content2{
width:500px;
border-radius:10px;
padding:20px;
position:absolute;
top:15px;
left:30%;
background-color:#2F4056;
z-index:9;
cursor:pointer
}
.tips{
cursor:pointer
}
.text-sec font{
margin-top:10px;
margin-bottom:10px
}
</style>
</head>
<body>
<script src="dist/js/swiper.min.js"></script>
<script src="dist/js/jquery.js"></script>
<script src="dist/js/echart.js"></script>
<script src="dist/js/china.js"></script>
<div class="swiper-container swiper-container-vertical" style="height:100vh">
<div style="transform: rotate(-90deg);top:90%;left:50%;margin-left:-22px" class="swiper-button-prev"></div>
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:#00D5D5;height:100vh">
<div id="first" style="position:absolute;top:4%;width:100%;height:100%;overflow:hidden">
<div class="title_div" style="width:100%;color:#272727;opacity: 1;text-align:center;">
<font size="5"><strong>“城市看海”终结者——海绵城市</strong></font>
</div>
<div class="title_div" style="width:100%;color:#272727;opacity: 1;text-align:center;padding-top:50px;">
<font size="4">中国海绵城市水资源再利用</font>
</div>
<div class="title_div" style="width:100%;color:#272727;opacity: 1;text-align:center;padding-bottom:100px">
<font size="3">By 田文越 魏泽玉 南一凡 续兆攀 郭笑孜</font>
</div>
<div style="position:absolute;margin:auto;width:100%;height:100%;overflow:hidden;text-align: center">
<img src="333.gif" border="0" usemap="#planetmap" alt="Planets">
</div>
</div>
</div>
<!-- 第二页 -->
<div class="swiper-slide" style="background-color:white;height:100vh">
<div id="sec" style="position:absolute;top:4%;width:100%;height:100%;overflow:hidden">
<div class="text-sec" style="width:100%;color:#272727;opacity: 1;text-align:center;padding-top:100px">
<font size="5"><strong>世界上最浪漫的事情，就是和心爱的人一起看海。</strong></font></br>
<font size="5"><strong>不过这些年，看海只需要一场暴雨，就能在家感受到全方位海景了。</strong></font></br>
<font size="5"><strong>2010年以来，我国平均每年有185座城市受到城市内涝的威胁，大家还记得那些年坐过的公交船吗？</strong></font></br>
<font size="5"><strong>归根结底，城市内涝一方面是天气原因，极端性强降雨逐年增多；</strong></font></br>
<font size="5"><strong>最关键的是由于城市绿地逐年减少，导致雨水的积存和渗透能力降低。而市政管网不堪重负，往往逢雨必涝。</strong></font></br>
<font size="5"><strong>为了解决城市内涝问题，2015年，我国提出了建设海绵城市。</strong></font></br>
<font size="5"><strong>海绵城市是指城市能够像海绵一样，在适应环境变化和应对自然灾害等方面具有良好的弹性，</strong></font></br>
<font size="5"><strong>能够吸水、蓄水、渗水、净水，需要时再将蓄存的水“释放”并加以利用。</strong></font>
</div>
<div style="position:absolute;margin:auto;width:100%;overflow:hidden;text-align: center">
<img style="width:30%;height:30%;" src="444.jpg" border="0" usemap="#planetmap" alt="Planets">
</div>
</div>
</div>
<!-- 第三页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div class="content" style="color: white;">
即把雨水留下来。现在人工建设破坏了自然地形地貌后，短时间内水汇集到一个地方，就形成了内涝。所以要把降雨蓄起来，以达到调蓄和错峰。而当下海绵城市蓄水环节有固定的标准和要求，地下蓄水样式多样，总体常用形式有两种：塑料模块蓄水、地下蓄水池。
</div>
<div class="content1" style="color: white;">
与传统城市建设模式不同，海绵城市的建设关键在于扭转挂念。建设海绵城市特有的“海绵体”，可以有效缓解传统城市逢雨必涝、旱涝急转等问题。城市“海绵体”既包括河、湖、池塘等水系，也包括绿地、花园、可渗透路面这样的城市配套设施。雨水通过这些“海绵体”下渗、滞蓄、净化、回用，最后剩余部分径流通过管网、泵站外排，从而可有效提高城市排水系统的标准，缓减城市内涝的压力。
</div>
<div class="content2" style="color: white;">
友情提示：鼠标划过小云有原理介绍哦
</div>
<div style="position:absolute;margin:auto;width:100%;height:100%;overflow:hidden;text-align: center">
<div style="position:absolute;margin-left:50%;left:-1024px;width:2048px;height:1365px;">
<div text=1 class="tips" style="position:absolute;width:150px;height:100px;left:428px;top:760px;">
</div>
<div text=3 class="tips" style="position:absolute;width:150px;height:100px;left:1000px;top:800px;">
</div>
<div text=0 class="tips" style="position:absolute;width:150px;height:100px;left:780px;top:650px;">
</div>
<div text=2 class="tips" style="position:absolute;width:150px;height:100px;left:1240px;top:650px;">
</div>
<div text=4 class="tips" style="position:absolute;width:150px;height:100px;left:330px;top:500px;">
</div>
<div text=5 class="tips" style="position:absolute;width:150px;height:100px;left:600px;top:1180px;">
</div>
<img src="model.jpg" border="0" usemap="#planetmap" alt="Planets" />
</div>
</div>
</div>
<!-- 第四页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="main" style="position:absolute;top:4%;width:60%;height:90%;overflow:hidden"></div>
<div class="swiper-text" style="color:black;text-align:justify;position:absolute;top:26%;left:67%;width:24%">
<p class="middle">
<font size="4" color="#3C3C3C">我们选取了南北方各三个有进行试点的海绵城市作为代表进行数据整理。从2012年至2017年的数据中可以看出，南方城市在汛期的降水量和年平均总降水量均远远大于北方城市。这是直接造成北方城市内涝发生概率低于南方城市的直接原因。对于城市内涝，媒体的关注度也能从一个方面说明其严重程度。</font>
<br>
<font size="4" color="#3C3C3C"><strong>那么媒体对于此的关注度是多少呢？</strong></font></p>
</div>
</div>
<!-- 第五页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="mapDiv5" style="position:absolute;top:4%;width:60%;height:90%;overflow:hidden"></div>
<div class="swiper-text" style="color:black;text-align:justify;position:absolute;top:26%;left:60%;width:24%">
<p class="middle">
<font size="4" color="#3C3C3C">我们选取了人民网作为典型媒体进行其对代表城市暴雨报道的统计。从图中我们内看出，每个城市在汛期都遭遇过暴雨，但是南方城市总体因其地理原因发生暴雨次数普遍较多。如上海因是沿海城市，夏天发生台风次数较多，因此暴雨概率较大。成都因其处于四川盆地，乌云易积聚，因此暴雨也容易在此停留。</font>
<br>
<font size="4" color="#3C3C3C"><strong>那么，到目前为止，海绵城市的建设能为我们节约多少水资源呢？</strong></font></p>
</div>
</div>
<!-- 第六页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="year" style="position:absolute;top:4%;width:60%;height:90%;overflow:hidden"></div>
<div class="swiper-text" style="color:black;text-align:justify;position:absolute;top:26%;left:60%;width:24%">
<p class="middle">
<font size="4" color="#3C3C3C"><strong>海绵城市的节水量显著，为了让公众能够更加直观的了解海绵城市的对水资源利用的巨大作用。</strong></font></br><font size="4" color="#3C3C3C">我们通过对六个代表性城市海绵城市建成后每年节水总量进行预测性的统计，用海绵城市建成后一年的节水量能够支撑该城市多少年居民用水进行形象化的直观展现，同时采用饼状柱状图的可视化图例将城市与节水年份结合起来。</font></p>
</div>
</div>
<!-- 第七页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="people" style="position:absolute;top:4%;width:60%;height:90%;overflow:hidden"></div>
<div class="swiper-text" style="color:black;text-align:justify;position:absolute;top:26%;left:60%;width:24%">
<p class="middle">
<font size="4" color="#3C3C3C">海绵城市建设以来，通过海绵砖、绿地、花园、可渗透路面等形式及设施建设，海绵城市节水能力已显著提升，从海绵城市建设以来节水总量以及对应六个城市每年节水总量的统计不难看出，以“慢排缓释”和“源头分散”控制为主要规划设计理念，</font>
<br>
<font size="4" color="#3C3C3C"><strong>既避免了洪涝，又有效的收集了雨水。</strong></font></p>
</div>
</div>
<!-- 第八页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="eig" style="position:absolute;top:4%;width:100%;height:100%;overflow:hidden">
<div style="height:300px;width:40%;text-align:justify;position:absolute;top:15%; left:30%;">
<p class="middle">
<font size="3" color="#3C3C3C">从以上数据中，我们通过选取了南北方各三个典型城市做数据展示和分析，可以直观地看出各大城市在建设前的降水量、各市媒体对其进行的报道以及形象展示其预计能为这些城市节省多少水资源，能改善多少人的生活。从直观和形象的数据中我们可以看出，南北方城市因其地域的不同，在汛期来临时降水情况会有很大差异，如西安与成都在夏季时暴雨引发城市内涝的现象差距很大，我国对于这些城市的汛期防范也直接的与此类因素相关。<strong>总体来说，我国对于各大城市的汛期防范应对情况与其南北地域有着正相关性。</strong></font></p>
<p class="middle"><font size="3" color="#3C3C3C">夏季汛期来临暴雨突发之时各地区的应对，与其对生态问题的不同重视程度密切相关。这种不同的重视程度会在一定程度上衍生出很多问题，如西安在夏季因暴雨次数较少造成疏于应对，若一发生暴雨，会在短时间内造成城市内部的交通系统瘫痪，而有着良好排水系统的青岛则不会出现此类问题。</font></p>
<p class="middle"><font size="3" color="#3C3C3C"><strong>为了解决这些问题，我国政府推出了诸多应对措施，而从2012年开始提出的“海绵城市”就是改善城市生态问题的长远举措。</strong></font></p>
<p class="middle"><font size="3" color="#3C3C3C">2012年4月，在《2012低碳城市与区域发展科技论坛》中，“海绵城市”概念首次提出；2014年12月31日，根据习近平总书记关于“加强海绵城市建设”的讲话精神和近 期中央经济工作会要求，财政部、住房城乡建设部、水利部决定开展中央财政支持海绵城市建设试点工作。</font></p>
<p class="middle"><font size="3" color="#3C3C3C">自2015年开始建设国家级海绵城市以来，我国海绵城市建设已取得长足发展，作为城市发展理念和建设方式转型的重要标志，全国已有130多个城市制定了海绵城市建设方案。如图为对国家级试点海绵城市建设现状具体情况介绍。他们的分布如下图：</font></p>
</div>
</div>
</div>
<!-- 第九页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="map_1" style="position:absolute;top:4%;width:60%;height:90%;overflow:hidden"></div>
<div class="swiper-text" style="color:black;text-align:justify;position:absolute;top:26%;left:60%;width:24%">
<p class="middle">
<font size="4" color="#3C3C3C">全国已有130多个城市制定了海绵城市建设方案。如图为对北京、西安、武汉、成都、上海、郑州六个城市海绵城市建设现状具体情况介绍。</font>
<br>
<font size="4" color="#3C3C3C"><strong>我国海绵城市建设“时间表”已经明确且“只能往前，不可能往后”。</strong></font></p>
</div>
</div>
<!-- 第十页 -->
<div class="swiper-slide" style="background-color:#FBFBFF;height:100vh">
<div id="ten" style="position:absolute;top:4%;width:100%;height:100%;overflow:hidden">
<div style="height:300px;width:40%;text-align:justify;position:absolute;top:15%; left:30%;">
<p class="middle">
<font size="3" color="#3C3C3C">根据以上数据，如果上述各市均达成其建设目标，那么：<strong></br>1、通过海绵城市建设，将70%的降雨就地消纳和利用，到2020年，城市建成区20%以上的面积要达到海绵城市目标要求；到2030年，城市建成区80%以上的面积要达到目标要求。</strong></font></p>
<p class="middle"><font size="3" color="#3C3C3C">2、建设海绵城市要取得老百姓认可，达到<strong>“小雨不积水、大雨不内涝、水体不黑臭、热岛有缓解”</strong>的理想效果，同时要积极探索海绵城市建设的管理模式。</font></p>
<p class="middle"><font size="3" color="#3C3C3C"><strong>3、海绵城市的建设是一个长远目标，需要长期规划与实行。</strong>据《中国经济周刊》记者不完全统计，第一批试点的16个海绵城市中有10个发生内涝；第二批试点的14个海绵城市中有9个发生内涝。总体计算，目前已纳入试点的30个城市中，共有19个城市发生内涝，占比63%。这其中包括北京、天津、重庆等直辖市，还包括福州、武汉、济南、南宁等多个省会城市。
海绵城市已经试点一年，为什么在防治内涝方面仍没有见到成效？
根据《关于推进海绵城市建设的指导意见》，中央对试点城市考核的时间表是5~10年，而目前首批海绵城市试点工作启动仅一年。</font></p>
<p class="middle"><font size="3" color="#3C3C3C"><strong>“海绵城市并不是一天就建成的，海绵城市可能需要5年、10年，甚至更长时间才能解决。</strong>我们也不能因为这次水淹了，就说海绵城市的试点失败了。这些海绵城市试点，都有一定的示范作用。但是，这个示范意义大多是局部性的。生态水利和国土海绵系统建设是根本出路。”北京大学建筑与景观设计学院院长俞孔坚说。</font></p>
<p class="middle"><font size="3" color="#3C3C3C">由此可见，“海绵城市”生态建设的实施仍然面临着诸多考验。</font></p>
</div>
</div>
</div>
<!-- 第十一页 -->
<div class="swiper-slide" style="background-color:white;height:100vh">
<div id="ele" style="position:absolute;top:4%;width:100%;height:100%;overflow:hidden">
<div class="text-sec" style="width:100%;color:#272727;opacity: 1;text-align:center;padding-top:100px">
<font size="5"><strong>以上就是我国城市为海绵城市的水资源再利用</strong></font></br>
<font size="5"><strong>作出的举措、与生活的联系及其发展图景。</strong></font></br>
<font size="5"><strong>“海绵城市”的新型城市建设其战略成效将会是怎样，</strong></font></br>
<font size="5"><strong>各地区对于雨洪管理的治理力度能否得到重视，</strong></font></br>
<font size="5"><strong>未来我们能否建成理想型的海绵生态环境，</strong></font></br>
<font size="5"><strong>这些，都值得我们拭目以待。</strong></font></br>
<div style="margin:auto;width:100%;height:100%;overflow:hidden;text-align: center">
<img src="222.gif" border="0" usemap="#planetmap" alt="Planets">
</div>
</div>
<div class="text-sec" style="width:100%;color:#272727;opacity: 1;text-align:center;padding-top:100px">
<font size="3">数据来源与说明</font></br>
<font size="3">[1]人民网各省市历年报道</font></br>
<font size="3">[2]降水量及用水情况：知网数据库数据统计年鉴</font></br>
<font size="3">[3]名词解释及基本信息来源于百度百科“海绵城市”词条</font></br>
<font size="3">[4]图片来源：千图网，微博</font></br>
<font size="3">[5]六大城市预计节水量：中国水网，各城市政府官方网站</font></br>
<font size="3">[6]海绵城市建设现状：新华网</font></br>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: false, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: 'body',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
//scrollbar: {
// el: '.swiper-scrollbar',
// },
})
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text: '主要城市六年雨季降水统计图',
subtext: '数据来源：知网数据库',
x: 'center',
align: 'right'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['2012年-2014年雨季平均降水量','2015年-2017年雨季平均降水量','六年平均总降水量'],
x:'right',
y:'bottom'
},
xAxis: [
{
type: 'category',
data: ['北京','郑州','西安','上海','武汉','重庆'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '平均降水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} mm'
}
},
{
type: 'value',
name: '总降水量',
min: 0,
max: 1450,
interval: 300,
axisLabel: {
formatter: '{value} mm'
}
}
],
series: [
{
name:'2012年-2014年雨季平均降水量',
type:'bar',
data:[119.55,73.59,77.04,140,172.48,169.21]
},
{
name:'2015年-2017年雨季平均降水量',
type:'bar',
data:[110.51,106.6,70.09,210.2,193.68,198.78]
},
{
name:'六年平均总降水量',
type:'line',
yAxisIndex: 1,
data:[579.62,587.4,521.02,1367.68,1404.25,1270.93]
}
]
};
myChart.setOption(option);
var text = ['渗透雨水的方法多样，可以通过透水景观、道路的铺装以及绿色建筑的建设从源头将雨水留下来然后“渗”下去。',
'即把雨水留下来。现在人工建设破坏了自然地形地貌后，短时间内水汇集到一个地方，就形成了内涝。所以要把降雨蓄起来，以达到调蓄和错峰。而当下海绵城市蓄水环节有固定的标准和要求，地下蓄水样式多样，总体常用形式有两种：塑料模块蓄水、地下蓄水池。',
'其主要作用是延缓短时间内形成的雨水径流量。例如，通过微地形调节，让雨水慢慢地汇集到一个地方，用时间换空间。通过“滞”，可以延缓形成径流的高峰。具体形式总结为三种：雨水花园、生态滞留池、渗透池、人工湿地。',
'通过土壤的渗透，通过植被、绿地系统、水体等，都能对水质产生净化作用。因此，应该蓄起来，经过净化处理，然后回用到城市中。',
'在经过土壤渗滤净化、人工湿地净化、生物处理多层净化之后的雨水要尽可能被利用，不管是丰水地区还是缺水地区，都应该加强对雨水资源的利用。',
'利用城市竖向与工程设施相结合，排水防涝设施与天然水系河道相结合，当雨峰值过大的时候，地面排水与地下雨水管渠相结合的方式来实现一般排放和超标雨水的排放，避免内涝等灾害。',
]
var tip = {
$: function (ele) {
if (typeof (ele) == "object")
return ele;
else if (typeof (ele) == "string" || typeof (ele) == "number")
return document.getElementById(ele.toString());
return null;
},
mousePos: function (e) {
//获取提示展示的坐标
var e = e || window.event;
return {
x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
},
start: function (obj) {
var self = this;
//鼠标移入事件
obj.mouseenter(function () {
var t = $(".content");
t.html(text[$(this).attr("text")])
console.log($(this).attr("text"))
var mouse = self.mousePos();
t.css("left", mouse.x + 10 + 'px');
t.css("top", mouse.y - 100 + 'px');
//获取提示消息，这里为了支持格式，使用的html
//t.html($(this).attr("tips"));
t.css("display", "block");
t.css("z-index", "99999");
})
//鼠标移除事件
obj.mouseleave(function () {
var t = $(".content");
t.css("display", "none");
})
}
}
$(function(){
//启用提示
tip.start($(".tips"))
})
//第5页
mychart = echarts.init(document.getElementById("mapDiv5"));
option = {
baseOption:{
timeline: {
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 2000,
orient:'vertical',
left:'4%',
top: '20%',
bottom: '10%',
width: 55,
inverse: true,
//bottom: '10%',
// controlStyle: {
// position: 'left'
// },
data: ['北京','西安','郑州','武汉','上海','成都'],
label: {
<!-- formatter : function(s) { -->
<!-- return (new Date(s)).getFullYear(); -->
<!-- } -->
}
},
tooltip: {
<!-- trigger: 'item', -->
<!-- formatter:tooltipmapDiv5 -->
},
grid:[
{x: '7%', y: '7%', width: '38%', height: '38%'},
],
radar: {
gridIndex:0,
center: ['40%', '58%'],
radius: '70%',
indicator: [
{name: '2013', max: 150},
{name: '2014', max: 150},
{name: '2015', max: 150},
{name: '2016', max: 150},
{name: '2017', max: 150},
{name: '2018', max: 150}
],
shape: 'diamond',
splitNumber: 5,
name: {
textStyle: {
color: '#3C3C3C'
}
},
splitLine: {
lineStyle: {
color: '#6C6C6C',
opacity: .2
}
},
splitArea: {
areaStyle: {
color: '#ECF5FF',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15,
}
}
},
series: [{
name:'北京',
type:'radar',
symbol: "none",
areaStyle:{normal:{opacity: 0.6}},
itemStyle:{normal:{color: "#AA0000"}},
lineStyle:{normal:{color: "#FFFFFF", width: 2, opacity: 0.8}},
data:[[37, 32, 37, 19, 33, 41]]
}],
},
options: []
};
var nn = [
[37, 32, 37, 19, 33, 41],
[12, 23, 13, 30, 11, 27],
[6, 9, 14, 17, 8, 6],
[63, 42, 29, 89, 17, 7],
[56, 57, 90, 59, 21, 39],
[97, 53, 66, 84, 59, 143],
]
var yy = ['北京','西安','郑州','武汉','上海','成都']
for(var n = 0; n<6 ;n++){
option.options.push({
title: {
text: '2013-2018人民网对'+yy[n]+'暴雨以及积水报道统计次数',
left: 'center',
textStyle: {
color: '#272727',
fontSize:25,
}
},
series: [{
name:yy[n],
type:'radar',
symbol: "none",
areaStyle:{normal:{opacity: 0.6}},
itemStyle:{normal:{color: "#AA0000"}},
lineStyle:{normal:{color: "#FFFFFF", width: 2, opacity: 0.8}},
data:[nn[n]]
}]
})
}
mychart.setOption(option);
//第6页
mychart = echarts.init(document.getElementById("year"));
option = {
baseOption:{
timeline: {
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 2000,
orient:'vertical',
left:'4%',
top: '20%',
bottom: '10%',
width: 55,
inverse: true,
//bottom: '10%',
// controlStyle: {
// position: 'left'
// },
data: ['北京','西安','郑州','武汉','上海','成都'],
label: {
<!-- formatter : function(s) { -->
<!-- return (new Date(s)).getFullYear(); -->
<!-- } -->
}
},
title: {
text:' 每年节水量可支撑该城市居民用水年数',
left: 'center',
top: 15,
textStyle: {
color: '#272727',
fontSize:25,
}
},
tooltip: {
<!-- trigger: 'item', -->
<!-- formatter:tooltipmapDiv5 -->
},
angleAxis: {
type: 'category',
data: ['2015', '2016', '2017'],
z: 10
},
radiusAxis: {
},
polar: {
},
series: [{
type: 'bar',
data: [15.9, 26.9, 25.2],
coordinateSystem: 'polar',
name: 'A',
stack: 'a'
}],
legend: {
show: false,
data: ['A']
}
},
options: []
};
var cc= [
[15.9, 26.9, 25.2],
[13.5, 13, 17.6],
[8.3, 11, 8.7],
[23.9, 51.3, 31.4],
[0.005, 0.006, 0.006],
[14.4, 19, 21],
]
var tt =['北京','西安','郑州','武汉','上海','成都']
for(var n = 0; n<6 ;n++){
option.options.push({
title: {
text: tt[n]+'市每年节水量可支撑该城市居民用水年数',
left: 'center',
textStyle: {
color: '#272727',
fontSize:25,
}
},
series: [{
type: 'bar',
data: cc[n],
coordinateSystem: 'polar',
name: tt[n],
stack: 'a'
}]
})
}
mychart.setOption(option);
//第7页
mychart = echarts.init(document.getElementById("people"));
option = {
baseOption:{
timeline: {
// y: 0,
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 2000,
orient:'vertical',
left:'4%',
top: '20%',
bottom: '10%',
width: 55,
inverse: true,
data: [
'2015',
'2016',
'2017',
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
title: {
text:'',
left: 'center',
top: 15,
textStyle: {
color: '#272727',
fontSize:25,
}
},
legend: {
data: ['北京','西安','郑州','武汉','上海','成都'],
orient:'vertical',
left:'75%',
top:'30%',
itemGap:12
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
width:'45%',
height:'80%',
left:'20%',
top:'14%'
},
yAxis: {
data: [ '全国用水人数(万)','成人体内含水(亿)'],
nameLocation:'end',
inverse: false,
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
margin: 30,
textStyle: {
fontSize: 14
},
},
},
xAxis: {
splitLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
axisLine: {show: false}
},
series: [
]
},
options: []
};
var dd = [
{
"name":2015,
'value':[
[13345,1.3640],
[8319,0.85],
[6402,0.65],
[23616,2.41],
[1.225,0.00125],
[15204,1.55],
]
},
{
"name":2016,
'value':[
[22930,2.382],
[8302,0.86],
[8917,0.93],
[41009,4.21],
[1.428,0.00148],
[20031,2.08],
]
},
{
"name":2017,
'value':[
[21836,2.281],
[12867,1.34],
[7055,0.74],
[26935,2.81],
[1.405,0.00146],
[22190,2.32],
]
},
];
for(var n = 0; n<3 ;n++){
option.options.push({
title: {
text:dd[n].name+'年各城市节水量趣味呈现',
subtext: '节水量以人体含水量与人平均用水量为单位换算后的数量',
left: 'center',
top: 15,
textStyle: {
color: '#272727',
fontSize:25,
}
},
series: [
{
name:'北京',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[0][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[0][0], symbol:'pin',symbolSize:15},
]
},
{
name:'西安',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[1][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[1][0], symbol:'pin',symbolSize:15},
]
},
{
name:'郑州',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[2][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[2][0], symbol:'pin',symbolSize:15},
]
},
{
name:'武汉',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[3][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[3][0], symbol:'pin',symbolSize:15},
]
},
{
name:'上海',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[4][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[4][0], symbol:'pin',symbolSize:15},
]
},
{
name:'成都',
type:'pictorialBar',
barGap: "15%",
barCategoryGap: "20%",
symbolRepeat: true,
symbolSize:[
'80%',
'60%'
],
label:{
normal: {
show: true,
position: 'right',
offset: [10, 0],
textStyle: {
fontSize: 16
}
},
position: "outside",
show: true,
},
data:[
{value:Math.round(dd[n].value[5][1]*1000000)/100, symbol:'triangle',symbolSize:15},
{value:dd[n].value[5][0], symbol:'pin',symbolSize:15},
]
},
]
})
}
mychart.setOption(option);
//第9页
var name_title = "海绵城市建设现状"
var subname = '数据来源《大河报》、政府工作报告、华商报、成都政府网、中国水网等'
var nameColor = " rgb(55, 75, 113)"
var name_fontFamily = '等线'
var subname_fontSize = 15
var name_fontSize = 18
var mapName = 'china'
var myChart = echarts.init(document.getElementById('map_1'));
var data = [
{name:"北京",value:100},
{name:"天津",value:50},
{name:"河北",value:50},
{name:"山西",value:1},
{name:"内蒙古",value:1},
{name:"辽宁",value:50},
{name:"吉林",value:50},
{name:"黑龙江",value:1},
{name:"上海",value:100},
{name:"江苏",value:50},
{name:"浙江",value:50},
{name:"安徽",value:50},
{name:"福建",value:50},
{name:"江西",value:50},
{name:"山东",value:50},
{name:"河南",value:100},
{name:"湖北",value:100},
{name:"湖南",value:50},
{name:"重庆",value:1},
{name:"四川",value:100},
{name:"贵州",value:50},
{name:"云南",value:50},
{name:"西藏",value:1},
{name:"陕西",value:100},
{name:"甘肃",value:50},
{name:"海南",value:1},
{name:"青海",value:50},
{name:"宁夏",value:50},
{name:"新疆",value:1},
{name:"广东",value:50},
{name:"广西",value:50},
];
var geoCoordMap = {};
var toolTipData = [
{name:"北京",value:[{name:"北京",value:'北京市试点区域总面积19.36平方公里,建设任务包括海绵型建筑与小区、海绵型公园和绿地、海绵型道路与广场、水系整治与生态修复、防洪与排水防涝、管网建设、管控平台建设等七大类51项建设工程项目。北京建设海绵城市的目标，2020年城市建成区的20%面积实现70%雨水就地消纳，2030年城市建成区的80%面积实现70%雨水就地消纳。'}]},
{name:"上海",value:[{name:"上海",value:'上海市为达到年径流量控制率80%，以及年径流污染控制率50%的目标，临港口袋公园运用了绿色屋顶、透水铺装、雨水花园和人工表流湿地四大海绵设施进行改造。海绵化改造使得城市内部具备了净，蓄、滞、排等海绵功能，做到“小雨不湿鞋”。通过建设雨水花园，蓄渗、净化径流雨水;对人行步道和局部广场进行透水铺装建设，使雨水得到进一步的沉淀、过滤、净化和调蓄'}]},
{name:"河南",value:[{name:"郑州",value:'郑州主城区规划191条涝水行泄通道；建设和改造海绵公园；在河流两岸打造生态滨河缓冲带；规模较大的住宅小区、企事业单位、学校、医院、宾馆等逐步兴建集雨环境用水工程；城市人行道路及庭院、厂区、办公区等硬化带应采用高渗透性的材料，以便于雨水收集。到2020年，郑州主城区达到海绵城市建设要求的面积约占建成区总面积的22.5%；到2030年，主城区达到海绵城市建设要求的面积约占建成区总面积的88.7%'}]},
{name:"湖北",value:[{name:"武汉",value:'武汉预计到2020年武汉中心城区将有20%的面积实现海绵化。武汉市海绵城市试点项目的成功用实践证明了这一理论的可靠性，海绵城市的不断推广，也带动了透水砖的广泛应用，改造了117个校区、公建以及29所学校，受益师生近3万人，还增加了3737个车位、1276个座位、33100平方米的活动场所。海绵城市的改造的成果有目共睹'}]},
{name:"四川",value:[{name:"成都",value:'成都大力推进海绵城市建设，目标是解决缺水、内涝、水脏等一系列“城市病”。注重“自然和人工结合、生态办法和工程办法结合、地上和地下结合”，雨水得以就地吸纳、蓄渗、净化和利用，初步形成约122.88平方公里的海绵综合体。目前已建成圣灯公园、海滨公园、交子公园、金沙滨河公园、天府公园等一批海绵型公园绿地和小游园微绿地'}]},
{name:"陕西",value:[{name:"西安",value:'西安市预计总投资约200亿元的62个项目已投入建设，试点项目涵盖老旧社区改造、市政道路、绿地广场、河湖水系、建筑小区等多种形式，力求海绵城市建设多层次体系。不仅要减少城市的内涝，还要通过渗、滞、蓄、净、用等手段，实现“修复水生态、涵养水资源、改善水环境、提高水安全、复兴水文化”的目标'}]},
{name:"河北",value:[{name:"指定方案城市",value:'迁安'}]},
{name:"浙江",value:[{name:"指定方案城市",value:'宁波、嘉兴'}]},
{name:"河北",value:[{name:"指定方案城市",value:'迁安'}]},
{name:"吉林",value:[{name:"指定方案城市",value:'白城'}]},
{name:"江苏",value:[{name:"指定方案城市",value:'镇江'}]},
{name:"安徽",value:[{name:"指定方案城市",value:'池州'}]},
{name:"江西",value:[{name:"指定方案城市",value:'萍乡'}]},
{name:"湖南",value:[{name:"指定方案城市",value:'常德'}]},
{name:"广西",value:[{name:"指定方案城市",value:'南宁'}]},
{name:"重庆",value:[{name:"指定方案城市",value:'重庆'}]},
{name:"贵州",value:[{name:"指定方案城市",value:'贵安新区'}]},
{name:"天津",value:[{name:"指定方案城市",value:'天津'}]},
{name:"辽宁",value:[{name:"指定方案城市",value:'大连'}]},
{name:"福建",value:[{name:"指定方案城市",value:'福州、厦门'}]},
{name:"山东",value:[{name:"指定方案城市",value:'青岛、济南'}]},
{name:"广东",value:[{name:"指定方案城市",value:'珠海、深圳'}]},
{name:"海口",value:[{name:"指定方案城市",value:'三亚'}]},
{name:"云南",value:[{name:"指定方案城市",value:'玉溪'}]},
{name:"甘肃",value:[{name:"指定方案城市",value:'庆阳'}]},
{name:"青海",value:[{name:"指定方案城市",value:'西宁'}]},
{name:"宁夏",value:[{name:"指定方案城市",value:'固原'}]},
];
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,