-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1376 lines (1356 loc) · 77.2 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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>地球不流浪</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body style="background-image: url("assets/img/starfield.jpg");height: 3000px;">
<div style="height: 680px;">
<div class="container">
<div class="row">
<div class="col-md-6 col-xl-5">
<div id="earth" style="width: 250%; height: 600px"></div><!-- 地球 -->
</div>
<div class="col-md-6 col-xl-7" style="width: 800px;"><img src="assets/img/流浪地球1.png" style="width: 700px;"></div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><br><strong> 电影《流浪地球》：预计在2500年，近100代人带着地球飘泊于宇宙之中。此时的家园——“地球”，已经了无生机，人类只能被迫生存于地面以下。</strong><br><br><strong> 地球表面温差极大，热可高达70℃，冷可低至零下一百多度；海水淹没了三分之二的城市，巨浪高达100来米；此时的地球表面已经不适合任何生物的居住，亦不再存在任何植被覆盖，五百年前的绿色星球，如今只见白皑皑一片。环境被破坏，已不见曾经的绿水青山、万物复苏、百鸟齐鸣、生机盎然，人类不仅生存难以维持，还要带着“地球”去“流浪”。</strong><br><br><strong> 失去美丽宜居的生态环境，带着这样的“地球”去流浪，已不能称之为家园。就好像背了一个房子，却没有了家的味道。影片里一句话点醒了环境的重要性：“我原来以为家就在身后，现在才知道，家在前面”。家曾经给我们依靠，但家需要我们“呵护”——爱护家园，保护生态环境，珍惜地球。</strong><br><br><br></p>
</div>
<div class="container d-xl-flex align-items-xl-center"><img src="assets/img/小标题1.png" style="width: 900px;"></div>
<div class="container d-xl-flex align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 建设可持续的生态环境，森林保护必不可少，中国作为IUCN（世界环保组织）的重要成员之一，也为保护森林资源做着自己的努力。</strong><br><br><strong> 改革开放40年以来，我国在政策上出台了许多环境保护相关的政策，从最初只重视经济发展，到现在提出“绿水青山就是金山银山”的发展理念。对于绿水青山的保护，自1978-至今，经历了大致四个发展阶段：</strong><br><br><strong> 1978-1991年为政策萌芽阶段，我国林业系统在该阶段初步构建；1992-2001年为政策发展阶段，该阶段提出了可持续发展战略思想；2002-2011年为政策成熟阶段，科学发展观下的生态文明体系建成；2012年至今为政策升华阶段，新时代下建设美丽中国的林业布局。</strong><br><br><br></p>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 d-xl-flex justify-content-xl-center align-items-xl-center" style="height: 680px;"><img src="assets/img/大事记.png" style="width: 1100px;"></div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 从改革开放40年来的政策变迁可见我国的政策已经由此前单纯注重林业的经济效益向经济效益、生态效益和社会效益并重的方向发展。随着实践的发展，党和政府对林业发展规律的认识日益深刻，林业政策的科学性也不断增强。针对林业发展中出现的问题，相应的政策、措施由侧重事后补救转为注重事前预防，由被动应付，转向积极主动，科学性、指导性、预见性不断增强。同时，林业发展更加注重顶层设计和总体规划。</strong><br><br></p>
</div>
<div>
<div class="container" style="width: 1500px;">
<div class="row">
<div class="col-md-6 col-xl-5 d-xl-flex justify-content-xl-center align-items-xl-center">
<p class="d-xl-flex justify-content-xl-center align-items-xl-center" style="color: #ffffff;height: 400px;font-size: 22px;"><strong> 随着党中央的，政府政策的落实，我国森林覆盖率已有了明显提升。过观察中国森林覆盖率地图，我们可以发现，中国森林覆盖率较高的地区集中在东三省和西南地区，而西北大部分地区较为干旱，森林资料都很稀缺，东三省地区由于三面环山，降水丰富，森林密布，而西南地区由于较少开发且原始天然林相对保存较好，森林资源较为丰富。</strong><br><br><br><br></p>
</div>
<div class="col-md-6 col-xl-7">
<div id="forest" style="width: 660px;height:500px;"></div><!-- 森林覆盖 -->
</div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center" style="height:400px;">
<p class="d-xl-flex justify-content-xl-center align-items-xl-center" style="color: #ffffff;font-size: 24px;"><br><br><strong> 虽然地图上呈现的森林覆盖率情况较为乐观，但是中国未受侵扰的原始森林景观面积仅为 695 万公顷，仅占中国森林面积的 3.34%。在 2000-2013间，因为森林采伐、道路修建、矿产开采、旅游开发等人为侵扰的加剧，这些珍贵的原始森林退化了 49 万公顷，相比起 2000 年退化了 6.6%。在这当中，有一半以上退化的原始森林位于云南省境内。通过对云南省国土资源厅公开的数据分析后发现：采矿成为云南省原始森林景观退化的最主要原因。</strong><br><br><br><br></p>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6 d-xl-flex justify-content-xl-center align-items-xl-center">
<p class="d-xl-flex justify-content-xl-center align-items-xl-center" style="color: #ffffff;font-size: 22px;"><strong> 根据云南森林覆盖率和矿点分布图可知，云南省全部矿点均分布在云南西北部地区，这些地方由于开发晚，森林资源较少受到侵扰，特别是迪庆藏族自治州和怒江傈僳族自治州的森林覆盖率极高，存在大量未收侵扰的的原始森林，图中共计33个矿点，有18个矿点（发亮黄点）全部存在于未受侵扰的原始森林，其余矿点（未发亮黄点）部分存在有未受侵扰的原始森林。因此就目前的情况来看，虽然国家已经颁布了很多护林政策，但目前就云南的矿点开发位置来看，仍集中于资源较多的原始森林地区，因此对于森林资源的保护还有很长的路要走。</strong></p>
</div>
<div class="col-md-6" style="height:550px;">
<div id="yunnan" style="width: 660px;height:550px;"></div><!-- 云南 -->
</div>
</div>
</div>
</div>
<div class="container d-xl-flex align-items-xl-center"><img src="assets/img/动物标题.png" style="width: 900px;"></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 d-xl-flex justify-content-xl-center align-items-xl-center" style="height: 250px;">
<p class="d-xl-flex justify-content-xl-center align-items-xl-center" style="color: #ffffff;font-size: 24px;"><br><br><br><strong> 在保护我国森林资源的过程中，保护生物多样性也是其中的一项重要任务。生物多样性是人类社会赖以生存和发展的基础，我们的衣、食、住、行及物质文化生活的许多方面都与生物多样性的维持密切相关。我国在很多地方设立了自然保护区，这对于大自然的平衡和野生动物的保护有着重要的作用。</strong><br><br></p>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6 d-xl-flex justify-content-xl-center align-items-xl-center" style="width: 500px;">
<p style="color: #ffffff;font-size: 22px;"><br><strong> 据林业局数据统计，截止2013年，我国野生动植物保护区数量不断增多，江西、内蒙古、黑龙江三省份数量最多，分别达到了233个、140个、139个；其余省份自然保护区数量也均有增加，逐步形成了较系统的自然保护区体系。</strong><br><br></p>
</div>
<div class="col-md-6" style="width: 640px;">
<div id="animal" style="width: 660px;height:500px;"></div><!-- 保护区 -->
</div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 如今，虽然我国已逐渐建立起较系统的自然保护区，但仍有一些物种濒临灭亡。因为依赖于天然林的生存环境，在人工林里无法生存，例如海南长臂猿。它是全球最濒危灵长类动物，目前只有4群27只，仅分布在霸王岭国家级自然保护区。</strong><br><br><strong> 海南长臂猿生活的海南热带天然林是中国生物多样性最为丰富的地区之一，依赖其生存的海南长臂猿就是中国的特有物种，天然林的消失是其生存的首要威胁。海南长臂猿对生存环境有很强的依赖性，只有在原始的天然林中才能生存，在林种单一的人工林、砍伐过的次生林里都不能生存。海南长臂猿赖以栖身的原始森林不断遭到破坏，导致物种数量不断减少。</strong><br><br><strong> 在作品中，我们摘录了一篇来自于海南周刊十年·关注《丛林精灵相守到老》的报道，它讲述了一位可敬的自然保护区工作人员长达34年守望海南长臂猿的传奇故事。</strong><br><br></p>
</div>
<div class="container"><img src="assets/img/因为热爱.png" style="width: 1100px;"></div>
<div>
<div class="container">
<div class="row">
<div class="col-md-6 d-xl-flex justify-content-xl-center align-items-xl-center" style="height: 300px;">
<p style="color: #ffffff;font-size: 18px;"><br><strong> 对于昌江黎族自治县霸王岭自然保护区工作人员陈庆来说，绵延的大山就是他的家，那里有一群最可爱的“家人”——海南长臂猿。34年来他踏遍大山追寻长臂猿，协助科研团队一点点地解开了长臂猿的生存秘密，守护长臂猿已成为他内心抹不去的责任和寄托。</strong><br><br></p>
</div>
<div class="col-md-6 d-xl-flex justify-content-xl-center align-items-xl-center"><img src="assets/img/海南长臂猿.jpg"></div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 d-xl-flex justify-content-xl-center align-items-xl-center" style="height: 250px;">
<p style="color: #ffffff;font-size: 18px;"><br><strong> 霸王岭自然保护区为保护长臂猿设置了4个监测长臂猿的驻守点，种植了2000多亩喜食的植物，宣传已经面临濒危的风险。渐渐地长臂猿从原先的7只慢慢繁衍到了27只，境内破坏的生态区域也逐步恢复，长臂猿活动的范围从山顶扩大到山坡区域。</strong><br><br><strong> “这辈子都离不开这座大山，离不开它们了。” 长臂猿是大山的精灵，陈庆也会坚持用自己的一生来保护海南长臂猿。 </strong><br><br></p>
</div>
</div>
<div class="row">
<div class="col-md-6 d-xl-flex justify-content-xl-end align-items-xl-center"><img class="float-right d-xl-flex justify-content-xl-end" src="assets/img/海南长臂猿2.jpg"></div>
<div class="col d-xl-flex justify-content-xl-start align-items-xl-center"><img class="float-left" src="assets/img/海南长臂猿3.jpg"></div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-start" style="height: 280px;"><img src="assets/img/小标题3.png" style="width: 900px;"></div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 4月1日，“中华人民共和国应急管理部”通报称，3月30日18时许，凉山州木里县雅砻江镇立尔村发生森林火灾，当地迅速组织力量赶赴火场。3月31日下午，部分扑火人员因风向突变、山火爆燃而失联。1日19时，“中华人民共和国应急管理部”与“@微凉山”同步通报称，共有30名失联扑火人员牺牲，包括27名森林消防队员和3名地方干部群众；。应急管理部和四川省委省政府全力指导开展火灾扑救、牺牲人员遗体辨认、家属慰问抚恤等工作。央视网、中新网、《新京报》等多家媒体跟进报道此事，舆论场快速升温。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p class="d-xl-flex justify-content-xl-center align-items-xl-center" style="color: #ffffff;font-size: 24px;"><br><strong> 此次火灾事故中，舆论场整体呈现热度高、讨论多、观点正面的特征。人民网、新华社等多家媒体也在专题页面进行了报道。我们团队搜集了2014年以来媒体关于火灾报道搜索度前三的热词，并绘制热词数据时间折线图。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center" style="height: 550px;">
<div id="baidu" style="width: 1200px;height:400px;"></div><!-- 百度 -->
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 从上图观察可知，每年3-5月份是火灾多发和媒体报道森林火灾最频繁的时段；在2015年8月，由于天津滨海新区爆炸事件的发生，消防员热词搜索达到了最高峰；在2019年4月，凉山大火事件更是让森林火灾和消防员等热词达到新闻热点关注的高潮。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><strong> 有森林火灾发生，必然就会产生森林资源的损毁和人员伤亡，这不仅危机到了群众和消防员的安全，更是对我们赖以生存的自然环境造成了破坏。于是我们统计了2014年到2016年的森林火灾损毁数据。</strong><br></p>
</div>
<div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<div class="row">
<div class="col-md-6" style="height: 350px;width: 570px;">
<div id="Sunburst" style="width: 570px;height:350px;"></div><!-- 森林火灾 -->
</div>
<div class="col-md-6">
<div id="people" style="width: 570px;height:350px;"></div><!-- 伤亡人数 -->
</div>
</div>
</div>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><strong> 从火灾受灾数据来看，虽然在16年天然林损毁面积有了较大改善，并且灾害死亡人数大幅锐减，但14到16年森林资源都受到了大大小小的损毁，并且每年都有森林火灾致人伤亡的情况，结合媒体对于森林火灾的报道，这三年并不是每年都有新闻引起我们的注意，我们应该反思，森林火灾无论灾情大小，是否造成人员伤亡，都应该得到媒体和公众的重视，并且所有问题根源，在于防而不是灭，只有从意识和技术上预防森林火灾，才能从根源消除问题。</strong></p>
</div>
<div class="container d-xl-flex align-items-xl-center"><img src="assets/img/小标题4.png" style="width: 900px;"></div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 除了以上我们对于森林保护的新闻调查和数据挖掘，为了近一步了解当代人的环境保护意识和参与度的基本情况，我们团队制作并发放了《关于环境保护了解度和重视度》的调查问卷。本次调查问卷共收到了有效问卷183份，其中男性60份，女性123份。通过本次问卷调查，我们对问卷结果进行了数据统计和分析，形成了如下词云。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center"><img class="d-flex d-xl-flex justify-content-center justify-content-xl-center align-items-xl-center" src="assets/img/tree2透明.png" style="width: 700px;"></div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 云图向我们展示了此次问卷调查的重要词频结果：以学生、青少年群体为主要代表，野生动物保护协会、联合国环境规划署、世界自然基金会、绿色和和平组织是大家最为熟知的环境保护组织；大多数人非常支持绿色出行和禁用一次性餐具，经常通过知乎、微博、社交平台、报刊杂志、新闻媒体来关注环境保护，并且非常愿意参与到环境保护公益活动中；社会总体上对环境保护的重视度很高，能够平衡处理环保与经济的关系。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;"><br><strong> 根据此次问卷的调查结果，我们发现有89.07%的人愿意参加环境保护的公益活动，有46.45%的人更愿意参与线上环保公益活动，其实环保公益活动就在我们每个人的身边，如支付宝的蚂蚁森林环保活动，让我们随时随地都可以参与进来。</strong><br><br></p>
</div>
<div class="container d-xl-flex justify-content-xl-center align-items-xl-center"><img class="d-flex d-xl-flex justify-content-center justify-content-xl-center align-items-xl-center" src="assets/img/蚂蚁森林2.png" style="width: 600px;"></div>
<div class="container d-xl-flex align-items-xl-center">
<p style="color: #ffffff;font-size: 24px;height: 200px;"><br><strong> 除了线上的环保公益活动，有48.63%的人也表示愿意参与线下公益活动，例如环保志愿者，环保的方式多种多样，任何一种方式都可以参与到环境保护的队伍中来，救援地球小分队之森林小队友情提示大家，发展千万招，环保第一招，生态环境好，地球不流浪。</strong><br><br></p>
</div>
<div class="container"><img src="assets/img/111.png" style="width: 1100px;"></div>
<div class="container d-xl-flex justify-content-xl-start align-items-xl-center" style="height: 400px;">
<p style="color: #ffffff;font-size: 18px;width: 700px;">文字记者：陈帆 刘倩君<br>数据可视化：李倩玉 袁丽娟<br> 视觉呈现：李倩玉 陈帆<br> 网页制作：李倩玉 <br>思路设计：李倩玉 <br>技术指导：夏烈阳 <br> 指导老师：毕秋敏 李世辉<br>数据和图片来源：绿色和平 | 百度指数 | 海南日报 | 中国林业网<br>制作软件：Bootstrap Studio | Echarts.js | photoshop | Adobe Illustrato|corelDRAW<br>如有问题，欢迎指正<br></p>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
//3D地球
<script src="dist/echarts.js"></script>
<script src="dist/echarts-gl.js"></script>
<script src="map/world.js"></script>
<script>
var dom = document.getElementById("earth")
var myChart = echarts.init(dom);
option = {
backgroundColor: "#000",
globe:{
baseTexture: "img/earth.jpg",
heightTexture: "img/earth.jpg",
displacementScale: 0.04,
environment: "img/starfield.jpg",
shading:"realistic",
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: "img/pisa.hdr",
diffuseIntensity: 0.2
}
}
}
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
//森林覆盖率
<script src="dist/echarts.js"></script>
<script src="map/china.js"></script>
<script type="text/javascript">
var data = [
{name: '北京', value: '35.84',value1:'58.81',value2:'37.15'},
{name: '天津', value: '9.87',value1:'11.16',value2:'10.56'},
{name: '河北', value: '23.41',value1:'439.33',value2:'220.9'},
{name: '山西', value: '18.03',value1:'282.41',value2:'131.81'},
{name: '内蒙古', value: '21.03',value1:'2487.9',value2:'331.65'},
{name: '辽宁', value: '38.24',value1:'557.31',value2:'307.08'},
{name: '吉林', value: '40.38',value1:'763.87',value2:'160.56'},
{name: '黑龙江', value: '43.16',value1:'1962.13',value2:'246.53'},
{name: '上海', value: '10.74',value1:'6.81',value2:'6.81'},
{name: '江苏', value: '15.80',value1:'162.10',value2:'156.82'},
{name: '浙江', value: '59.07',value1:'601.36',value2:'258.53'},
{name: '安徽', value: '27.53',value1:'380.42',value2:'225.07'},
{name: '福建', value: '65.95',value1:'801.27',value2:'377.69'},
{name: '江西', value: '60.01',value1:'1001.81',value2:'338.6'},
{name: '山东', value: '16.73',value1:'254.60',value2:'244.52'},
{name: '河南', value: '21.50',value1:'359.07',value2:'227.12'},
{name: '湖北', value: '38.40',value1:'713.86',value2:'194.85'},
{name: '湖南', value: '47.77',value1:'1011.94',value2:'474.61'},
{name: '广东', value: '51.26',value1:'906.13',value2:'557.89'},
{name: '广西', value: '56.51',value1:'1342.7',value2:'634.52'},
{name: '海南', value: '55.38',value1:'187.77',value2:'136.2'},
{name: '重庆', value: '38.43',value1:'316.44',value2:'92.55'},
{name: '四川', value: '35.22',value1:'1703.74',value2:'449.26'},
{name: '贵州', value: '37.09',value1:'653.35',value2:'237.3'},
{name: '云南', value: '50.03',value1:'1914.19',value2:'414.11'},
{name: '西藏', value: '11.98',value1:'1471.56',value2:'4.88'},
{name: '陕西', value: '41.42',value1:'853.24',value2:'236.97'},
{name: '甘肃', value: '11.28',value1:'507.45',value2:'102.97'},
{name: '青海', value: '5.63',value1:'406.39',value2:'7.44'},
{name: '宁夏', value: '11.89',value1:'61.8',value2:'14.43'},
{name: '新疆', value: '4.24',value1:'698.25',value2:'94'},
{name: '台湾', value: 0},
{name:"南海诸岛",value:0}
];
var option = {
backgroundColor:'rgba(128, 128, 128, 0.1)' ,
title: {
text: '全国森林覆盖率',
subtext: '数据来源国家林业局第八次全国森林资源连续清查统计数据\n(台湾和南海诸岛数据暂缺)',
sublink: 'http://www.forestry.gov.cn/data.html',
x: 'center',
textStyle:{
color:'rgba(255,255,255)'
},
subtextStyle:{
color:'rgba(255,255,255)'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name+'<br/>森林覆盖率：'+ params.data.value+'%'+'<br/>森林面积（万公顷）：'+ params.data.value1+'<br/>人工林面积（万公顷）：'+ params.data.value2;
return res
}
},
visualMap: {
show : true,
x: 'left',
y: '15%',
pieces: [
{gt: 50, color: '#088A08'},
{gt: 40, lte: 50,color: '#04B404'},
{gt: 30, lte: 40,color: '#01DF01'},
{gt: 20, lte: 30,color: '#86B404'},
{gt: 10, lte: 20,color: '#A5DF00'},
{lt: 10,color: '#E2D36B'}
],
textStyle:{
color:'rgba(255,255,255)'
},
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.0,//视角缩放比例
label: {
normal: {
show: false,////控制字体的大小和颜色
fontSize:'13',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#D0FA58',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '森林覆盖率',
type: 'map',
geoIndex: 0,
data:data,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: true
},
},
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
}
]
};
var myChart = echarts.init(document.getElementById('forest'));
myChart.setOption(option);
</script>
//云南矿产
<script src="dist/echarts.min.js"></script>
<script src="map/yunnan.js"></script>
<script type="text/javascript">
//点点的经纬度
var geoCoordMap = {
"泸水县自把矿区爷目瓦底矿段铅锌矿 1":[98.8,26.2333],
"兰坪县燕窝山铜铁矿 1":[99.0375,26.6833],
"兰坪县燕窝山铜铁矿 2":[99.0792,26.7833],
"兰坪县菜籽地铅锌矿 1":[99.0586,26.7794],
"贡山县嘎拉博铜铅锌矿 1":[98.6667,27.6667],
"贡山县格咱锡矿 1":[98.6333,27.85],
"贡山县普豆底铅锌矿 1":[98.7767,27.8853],
"贡山县普豆底铅锌矿 2":[98.7836,27.8953],
"贡山县丙中洛大理石矿 1":[98.5969,27.9672],
"云南迪庆普朗铜矿 2":[99.9992,28.0914],
"德钦里仁卡—红坡牛场铜铅锌矿 1":[98.8333,28.1389],
"德钦里仁卡—红坡牛场铜铅锌矿 2":[99,28.5833],
"香格里拉县红牛铜矿":[99.9167,28.15],
"德钦县永支铅锌矿 1":[98.7833,28.1583],
"德钦县红坡牛场铜金矿 2":[98.97,28.2167],
"香格里拉县郎都铜矿 1":[99.9333,28.1833],
"香格里拉县郎都铜矿 2":[99.9833,28.2167],
"香格里拉县卓玛铅锌矿 1":[100.042,28.2325],
"香格里拉县卓玛铅锌矿 2":[100.052,28.2414],
"香格里拉县欠虽铁矿 2":[99.9167,28.25],
"德钦县天沃煤矿 1":[99.0167,28.3917],
"德钦县天沃煤矿 2":[99.0264,28.4167],
"香格里拉县格咱斯各锑矿厂锑矿 1":[99.8806,28.4047],
"香格里拉县格咱斯各锑矿厂锑矿 2":[99.8856,28.4161],
"香格里拉县桑都格勒钼矿 2":[99.9833,28.4667],
"香格里拉县休瓦促钨钼矿 1":[99.9464,28.4908],
"德钦县羊拉—鲁春铜多金属矿化集中区":[98.9417,28.5],
"云南德钦羊拉外围铜矿 1":[99,28.5333],
"德钦县通力格铜矿 1":[99.0042,28.6875],
"德钦县通力格铜矿 2":[99.05,28.75],
"德钦县佛山托罗铅锌矿 1":[98.8,28.7333],
"德钦县佛山托罗铅锌矿 2":[98.85,28.77],
"德钦县格亚顶金铜矿1":[99.0333,28.7667]
};
var data = [
{name:"泸水县自把矿区爷目瓦底矿段铅锌矿 1",value:50},
{name:"兰坪县燕窝山铜铁矿 1",value:100},
{name:"兰坪县燕窝山铜铁矿 2",value:100},
{name:"兰坪县菜籽地铅锌矿 1",value:50},
{name:"贡山县嘎拉博铜铅锌矿 1",value:50},
{name:"贡山县格咱锡矿 1",value:50},
{name:"贡山县普豆底铅锌矿 1",value:100},
{name:"贡山县普豆底铅锌矿 2",value:100},
{name:"贡山县丙中洛大理石矿 1",value:50},
{name:"云南迪庆普朗铜矿 2",value:50},
{name:"德钦里仁卡—红坡牛场铜铅锌矿 1",value:100},
{name:"德钦里仁卡—红坡牛场铜铅锌矿 2",value:100},
{name:"香格里拉县红牛铜矿",value:50},
{name:"德钦县永支铅锌矿 1",value:50},
{name:"德钦县红坡牛场铜金矿 2",value:50},
{name:"香格里拉县郎都铜矿 1",value:100},
{name:"香格里拉县郎都铜矿 2",value:100},
{name:"香格里拉县卓玛铅锌矿 1",value:100},
{name:"香格里拉县卓玛铅锌矿 2",value:100},
{name:"香格里拉县欠虽铁矿 2",value:50},
{name:"德钦县天沃煤矿 1",value:100},
{name:"德钦县天沃煤矿 2",value:100},
{name:"香格里拉县格咱斯各锑矿厂锑矿 1",value:100},
{name:"香格里拉县格咱斯各锑矿厂锑矿 2",value:100},
{name:"香格里拉县桑都格勒钼矿 2",value:50},
{name:"香格里拉县休瓦促钨钼矿 1",value:50},
{name:"德钦县羊拉—鲁春铜多金属矿化集中区",value:50},
{name:"云南德钦羊拉外围铜矿 1",value:50},
{name:"德钦县通力格铜矿 1",value:100},
{name:"德钦县通力格铜矿 2",value:100},
{name:"德钦县佛山托罗铅锌矿 1",value:100},
{name:"德钦县佛山托罗铅锌矿 2",value:100},
{name:"德钦县格亚顶金铜矿 1",value:50}
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var max = 480, min = 9; // todo
var maxSize4Pin = 100, minSize4Pin = 20;
//背景地图的数据
var data2 = [
{name:"大理白族自治州",value:'59'},
{name:"保山市",value:'62'},
{name:"迪庆藏族自治州",value:'74'},
{name:"怒江傈僳族自治州",value:'73'},
{name:"德宏傣族景颇族自治州",value:'67'},
{name:"临沧市",value:'62'},
{name:"普洱市",value:'69'},
{name:"西双版纳傣族自治州",value:'78'},
{name:"红河哈尼族彝族自治州",value:'45'},
{name:"玉溪市",value:'54'},
{name:"昆明市",value:'47'},
{name:"楚雄彝族自治州",value:'61'},
{name:"曲靖市",value:'42'},
{name:"昭通市",value:'33'},
{name:"文山壮族苗族自治州",value:'49'},
{name:"丽江市",value:'66'}
];
//echarts设置
var option = {
backgroundColor: 'rgba(128, 128, 128, 0.1)',//整个画布背景
//标题组件
title: {
text: '云南森林覆盖率和矿点分布图',
subtext: '数据来源为绿色和平组织对于云南省“未受侵扰原始森林景观” 受矿业侵扰退化调研报告\n（旋转鼠标可放大地图）',
sublink: 'https://www.greenpeace.org.cn/yunnan-deforestation-report-2016/',
x: 'center',
textStyle: {
color: 'rgba(255,255,255)'
},
subtextStyle: {
color: 'rgba(255,255,255)'
}
},
//地图上的交互提示框
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name + '<br/>矿点位置：' +'['+ params.value[0]+','+params.value[1]+']'
+'<br/>矿是否全在IFL内：'+params.value[2]+'%在';
return res
}
},
//左下lengend
visualMap: {
show: true,//控制图标是否开启
x: 'left',
top: '15%',
min: 30,
max: 80,
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ['#BCF5A9', '#088A08'] // 绿色渐变
},
textStyle:{
color:'rgba(255,255,255)'
}
},
//设置地图区域样式
geo: {//引入云南省的地图
show: true,
map: '云南',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,//控制地图是否可以缩放和拖动
zoom: 1.0,
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#DBA901',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
//最后的系列，可以拼接多个图形
series: [
//显示矿产点的部分(散点图部分)
{
name: '云南矿点分布',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 7,//表示图标的大小
//直接在点上显示标签
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
//标签的样式
itemStyle: {
normal: {
color: '#FFFF00'
}
},
zlevel: 1
},
//地图部分
{
type: 'map',
map: 'yunnan',
geoIndex: 0,//设置为0以后，map可以用前面的geo设置的属性，在这里不用设置
//单独给地图数据和提示框
data: data2,
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name + '<br/>森林覆盖率：' + params.data.value + '%';
return res
}
}
},
//会亮的圈圈
{
name: 'Top 5',
type: 'effectScatter',
// symbol: 'pin',//控制点的形状
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 18)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
//控制点名称是否显示
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
}
},
///点的特效
itemStyle: {
normal: {
color: '#FFFF00',
shadowBlur: 7,
shadowColor: '#BFFF00'
}
},
zlevel: 3//有多个散点图形时，控制散点图形的排列顺序
},
]
};
var myChart = echarts.init(document.getElementById('yunnan'));
myChart.setOption(option);
</script>
//自然保护区
<script src="dist/echarts.min.js"></script>
<script src="map/china.js"></script>
<script type="text/javascript">
var geoCoordMap = {
"北京": [116.46,39.92],
"江苏": [118.78,32.04],
"吉林": [126.57,43.87],
"上海": [121.48,31.22],
"黑龙江": [126.63,45.75],
"辽宁": [123.38,41.8],
"安徽":[117.27,31.86],
"河北": [114.48,38.03],
"天津": [117.2,39.13],
"山西": [112.53,37.87],
"江西": [115.89,28.68],
"内蒙古": [111.65,40.82],
"杭州": [120.16,30.27],
"福州": [119.27,26.05],
};
var data = [
{name:"北京",value:16},
{name:"天津",value:5},
{name:"河北",value:34},
{name:"山西",value:45},
{name:"内蒙古",value:140},
{name:"辽宁",value:74},
{name:"吉林",value:38},
{name:"黑龙江",value:139},
{name:"上海",value:1},
{name:"江苏",value:23},
{name:"浙江",value:19},
{name:"安徽",value:59},
{name:"福建",value:89},
{name:"江西",value:'233'}
];
var data2 = [
{name: '北京', value: '3',value1: '',value2: '2'},
{name: '天津', value: '4',value1: '',value2: ''},
{name: '河北', value: '5',value1: '',value2: ''},
{name: '山西', value: '6',value1: '3',value2: '22'},
{name: '内蒙古', value: '7',value1: '10',value2: '5'},
{name: '辽宁', value: '8',value1: '',value2: ''},
{name: '吉林', value: '9',value1: '5',value2: '2'},
{name: '黑龙江', value: '10',value1: '7',value2: '29'},
{name: '上海', value: '11',value1: '',value2: '1'},
{name: '江苏', value: '12',value1: '',value2: ''},
{name: '浙江', value: '13',value1: '1',value2: '3'},
{name: '安徽', value: '14',value1: '',value2: '2'},
{name: '福建', value: '15',value1: '8',value2: '18'},
{name: '江西', value: '16',value1: '24',value2: '14'},
{name: '山东', value: '17',value1: '',value2: ''},
{name: '河南', value: '3',value1: '',value2: ''},
{name: '湖北', value: '4',value1: '',value2: ''},
{name: '湖南', value: '5',value1: '',value2: ''},
{name: '广东', value: '6',value1: '',value2: ''},
{name: '广西', value: '7',value1: '',value2: ''},
{name: '海南', value: '8',value1: '',value2: ''},
{name: '重庆', value: '9',value1: '',value2: ''},
{name: '四川', value: '10',value1: '',value2: ''},
{name: '贵州', value: '11',value1: '',value2: ''},
{name: '云南', value: '12',value1: '',value2: ''},
{name: '西藏', value: '13',value1: '',value2: ''},
{name: '陕西', value: '14',value1: '',value2: ''},
{name: '甘肃', value: '15',value1: '',value2: ''},
{name: '青海', value: '16',value1: '',value2: ''},
{name: '宁夏', value: '17',value1: '',value2: ''},
{name: '新疆', value: '3',value1: '',value2: ''},
{name: '台湾', value: '4',value1: '',value2: ''},
{name:"南海诸岛",value:'5',value1: '',value2: ''}
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var max = 233, min = 1; // todo
var maxSize4Pin = 80, minSize4Pin = 20;
var option = {
backgroundColor: 'rgba(128, 128, 128, 0.1)',//整个画布背景
//标题组件
title: {
text: '2013年各地区林业系统自然保护区分类情况',
subtext: '数据来源为中国林业网数据库',
sublink: 'http://www.forestry.gov.cn/data.html',
x: 'center',
textStyle: {
color: 'rgba(255,255,255)'
},
subtextStyle: {
color: 'rgba(255,255,255)'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name +'<br/>自然保护区总数:'+params.value[2];
return res
}
},
visualMap: {
show: false,//控制图标是否开启
min: 3,
max: 17,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#BCF5A9', '#088A08'] // 绿色渐变
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
color: ['#32c5e9','#fff'] // 黄蓝
}
},
geo: {//引入中国地图
show: true,
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,//控制地图是否可以缩放和拖动
zoom: 1.0,
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: '#D0FA58',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
//显示矿产点的部分(散点图部分)
{
name: '自然保护区分布',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 7,//表示图标的大小
//直接在点上显示标签
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
//标签的样式
itemStyle: {
normal: {
color: '#FFFF00'
}
}
},
//地图部分
{
type: 'map',
map: 'yunnan',
geoIndex: 0,
data: data2,
tooltip: {
trigger: 'item',
formatter: function (params) {
var res = params.name + '<br/>其中野生植物保护区：' + params.data.value1+
'<br/>其中野生动物保护区：' + params.data.value2;
return res
}
},
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a*min;
b = maxSize4Pin - a*max;
return a*val[2]+b;
},
label: {
show:true,
formatter: function (params) {
var res = params.value[2];
return res
},
textStyle: {
color: '#fff',
fontSize: 9,
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize:17,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
//控制点名称是否显示
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
}
},
///点的特效
itemStyle: {
normal: {
color: '#FFFF00',
shadowBlur: 7,
shadowColor: '#BFFF00'
}
},
zlevel: 1
},
]
};
var myChart = echarts.init(document.getElementById('animal'));
myChart.setOption(option);
</script>
//百度指数
<script src="dist/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var base = +new Date(1968, 9, 3);
var timeData = ['2014/2/3~2014/2/9','2014/3/17~2014/3/23','2014/3/24~2014/3/30','2014/3/31~2014/4/6','2014/4/7~2014/4/13','2014/4/14~2014/4/20',
'2014/4/21~2014/4/27','2014/4/28~2014/5/4','2014/5/5~2014/5/11','2014/5/12~2014/5/18','2014/5/19~2014/5/25','2014/5/26~2014/6/1','2014/6/2~2014/6/8',
'2014/6/9~2014/6/15','2014/6/16~2014/6/22','2014/6/23~2014/6/29','2014/6/30~2014/7/6','2014/7/7~2014/7/13','2014/7/14~2014/7/20','2014/7/21~2014/7/27',
'2014/7/28~2014/8/3','2014/8/4~2014/8/10','2014/8/11~2014/8/17','2014/8/18~2014/8/24','2014/8/25~2014/8/31','2014/9/1~2014/9/7','2014/9/8~2014/9/14',
'2014/9/15~2014/9/21','2014/9/22~2014/9/28','2014/9/29~2014/10/5','2014/10/6~2014/10/12','2014/10/13~2014/10/19','2014/10/20~2014/10/26','2014/10/27~2014/11/2',
'2014/11/3~2014/11/9','2014/11/10~2014/11/16','2014/11/17~2014/11/23','2014/11/24~2014/11/30','2014/12/1~2014/12/7','2014/12/8~2014/12/14','2014/12/15~2014/12/21',
'2014/12/22~2014/12/28','2014/12/29~2015/1/4','2015/1/5~2015/1/11','2015/1/12~2015/1/18','2015/1/19~2015/1/25','2015/1/26~2015/2/1','2015/2/2~2015/2/8',
'2015/2/9~2015/2/15','2015/2/16~2015/2/22','2015/2/23~2015/3/1','2015/3/2~2015/3/8','2015/3/9~2015/3/15','2015/3/16~2015/3/22', '2015/3/23~2015/3/29',
'2015/3/30~2015/4/5','2015/4/6~2015/4/12','2015/4/13~2015/4/19','2015/4/20~2015/4/26','2015/4/27~2015/5/3','2015/5/4~2015/5/10','2015/5/11~2015/5/17',
'2015/5/18~2015/5/24','2015/5/25~2015/5/31','2015/6/1~2015/6/7','2015/6/8~2015/6/14','2015/6/15~2015/6/21','2015/6/22~2015/6/28','2015/6/29~2015/7/5',
'2015/7/6~2015/7/12','2015/7/13~2015/7/19','2015/7/20~2015/7/26','2015/7/27~2015/8/2','2015/8/3~2015/8/9','2015/8/10~2015/8/16','2015/8/17~2015/8/23',
'2015/8/24~2015/8/30','2015/8/31~2015/9/6','2015/9/7~2015/9/13','2015/9/14~2015/9/20','2015/9/21~2015/9/27','2015/9/28~2015/10/4','2015/10/5~2015/10/11',
'2015/10/12~2015/10/18','2015/10/19~2015/10/25', '2015/10/26~2015/11/1', '2015/11/2~2015/11/8','2015/11/9~2015/11/15','2015/11/16~2015/11/22','2015/11/23~2015/11/29',
'2015/11/30~2015/12/6','2015/12/7~2015/12/13','2015/12/14~2015/12/20','2015/12/21~2015/12/27','2015/12/28~2016/1/3','2016/1/4~2016/1/10', '2016/1/11~2016/1/17',
'2016/1/18~2016/1/24','2016/1/25~2016/1/31', '2016/2/1~2016/2/7','2016/2/8~2016/2/14','2016/2/15~2016/2/21', '2016/2/22~2016/2/28','2016/2/29~2016/3/6',
'2016/3/7~2016/3/13','2016/3/14~2016/3/20', '2016/3/21~2016/3/27', '2016/3/28~2016/4/3', '2016/4/4~2016/4/10', '2016/4/11~2016/4/17','2016/4/18~2016/4/24',
'2016/4/25~2016/5/1', '2016/5/2~2016/5/8', '2016/5/9~2016/5/15', '2016/5/16~2016/5/22', '2016/5/23~2016/5/29', '2016/5/30~2016/6/5', '2016/6/6~2016/6/12',
'2016/6/13~2016/6/19', '2016/6/20~2016/6/26', '2016/6/27~2016/7/3', '2016/7/4~2016/7/10', '2016/7/11~2016/7/17', '2016/7/18~2016/7/24', '2016/7/25~2016/7/31',
'2016/8/1~2016/8/7', '2016/8/8~2016/8/14', '2016/8/15~2016/8/21', '2016/8/22~2016/8/28', '2016/8/29~2016/9/4', '2016/9/5~2016/9/11', '2016/9/12~2016/9/18',
'2016/9/19~2016/9/25', '2016/9/26~2016/10/2', '2016/10/3~2016/10/9','2016/10/10~2016/10/16','2016/10/17~2016/10/23','2016/10/24~2016/10/30', '2016/10/31~2016/11/6',
'2016/11/7~2016/11/13', '2016/11/14~2016/11/20', '2016/11/21~2016/11/27', '2016/11/28~2016/12/4', '2016/12/5~2016/12/11', '2016/12/12~2016/12/18','2016/12/19~2016/12/25',
'2016/12/26~2017/1/1','2017/1/2~2017/1/8','2017/1/9~2017/1/15', '2017/1/16~2017/1/22', '2017/1/23~2017/1/29','2017/1/30~2017/2/5','2017/2/6~2017/2/12', '2017/2/13~2017/2/19',
'2017/2/20~2017/2/26', '2017/2/27~2017/3/5','2017/3/6~2017/3/12', '2017/3/13~2017/3/19','2017/3/20~2017/3/26','2017/3/27~2017/4/2','2017/4/3~2017/4/9','2017/4/10~2017/4/16',
'2017/4/17~2017/4/23','2017/4/24~2017/4/30','2017/5/1~2017/5/7','2017/5/8~2017/5/14','2017/5/15~2017/5/21','2017/5/22~2017/5/28', '2017/5/29~2017/6/4','2017/6/5~2017/6/11',
'2017/6/12~2017/6/18','2017/6/19~2017/6/25', '2017/6/26~2017/7/2', '2017/7/3~2017/7/9', '2017/7/10~2017/7/16', '2017/7/17~2017/7/23', '2017/7/24~2017/7/30','2017/7/31~2017/8/6',
'2017/8/7~2017/8/13', '2017/8/14~2017/8/20','2017/8/21~2017/8/27', '2017/8/28~2017/9/3', '2017/9/4~2017/9/10', '2017/9/11~2017/9/17', '2017/9/18~2017/9/24', '2017/9/25~2017/10/1',
'2017/10/2~2017/10/8', '2017/10/9~2017/10/15', '2017/10/16~2017/10/22', '2017/10/23~2017/10/29','2017/10/30~2017/11/5', '2017/11/6~2017/11/12', '2017/11/13~2017/11/19',
'2017/11/20~2017/11/26', '2017/11/27~2017/12/3', '2017/12/4~2017/12/10','2017/12/11~2017/12/17', '2017/12/18~2017/12/24','2017/12/25~2017/12/31','2018/1/1~2018/1/7',
'2018/1/8~2018/1/14', '2018/1/15~2018/1/21', '2018/1/22~2018/1/28', '2018/1/29~2018/2/4', '2018/2/5~201/28', '2018/10/29~2018/118/2/11', '2018/2/12~2018/2/18',
'2018/2/19~2018/2/25','2018/2/26~2018/3/4','2018/3/5~2018/3/11','2018/3/12~2018/3/18','2018/3/19~2018/3/25','2018/3/26~2018/4/1','2018/4/2~2018/4/8','2018/4/9~2018/4/15',
'2018/4/16~2018/4/22','2018/4/23~2018/4/29','2018/4/30~2018/5/6','2018/5/7~2018/5/13','2018/5/14~2018/5/20','2018/5/21~2018/5/27','2018/5/28~2018/6/3','2018/6/4~2018/6/10',
'2018/6/11~2018/6/17','2018/6/18~2018/6/24','2018/6/25~2018/7/1','2018/7/2~2018/7/8','2018/7/9~2018/7/15','2018/7/16~2018/7/22','2018/7/23~2018/7/29','2018/7/30~2018/8/5',
'2018/8/6~2018/8/12','2018/8/13~2018/8/19','2018/8/20~2018/8/26','2018/8/27~2018/9/2','2018/9/3~2018/9/9','2018/9/10~2018/9/16', '2018/9/17~2018/9/23','2018/9/24~2018/9/30',
'2018/10/1~2018/10/7','2018/10/8~2018/10/14','2018/10/15~2018/10/21','2018/10/22~2018/10/4','2018/11/5~2018/11/11','2018/11/12~2018/11/18','2018/11/19~2018/11/25',
'2018/11/26~2018/12/2','2018/12/3~2018/12/9', '2018/12/10~2018/12/16', '2018/12/17~2018/12/23','2018/12/24~2018/12/30', '2018/12/31~2019/1/6','2019/1/7~2019/1/13',
'2019/1/14~2019/1/20', '2019/1/21~2019/1/27', '2019/1/28~2019/2/3','2019/2/4~2019/2/10', '2019/2/11~2019/2/17','2019/2/18~2019/2/24','2019/2/25~2019/3/3',
'2019/3/4~2019/3/10','2019/3/11~2019/3/17', '2019/3/18~2019/3/24', '2019/3/25~2019/3/31', '2019/4/1~2019/4/7', '2019/4/8~2019/4/14', '2019/4/15~2019/4/21',
'2019/4/22~2019/4/28','2019/4/29~2019/5/5'];
timeData = timeData.map(function (str) {
// return str.replace('2009/', '');
return str;
});
var timeData1 = ['2014/2/3','2014/3/17', '2014/3/24', '2014/3/31', '2014/4/7', '2014/4/14','2014/4/21', '2014/4/28', '2014/5/5', '2014/5/12',
'2014/5/19', '2014/5/26', '2014/6/2', '2014/6/9', '2014/6/16', '2014/6/23', '2014/6/30', '2014/7/7', '2014/7/14', '2014/7/21', '2014/7/28',
'2014/8/4', '2014/8/11', '2014/8/18', '2014/8/25', '2014/9/1', '2014/9/8', '2014/9/15', '2014/9/22', '2014/9/29', '2014/10/6', '2014/10/13',
'2014/10/20', '2014/10/27', '2014/11/3', '2014/11/10', '2014/11/17', '2014/11/24', '2014/12/1', '2014/12/8', '2014/12/15', '2014/12/22',
'2014/12/29', '2015/1/5', '2015/1/12', '2015/1/19', '2015/1/26', '2015/2/2', '2015/2/9', '2015/2/16', '2015/2/23', '2015/3/2', '2015/3/9',
'2015/3/16', '2015/3/23', '2015/3/30', '2015/4/6', '2015/4/13', '2015/4/20', '2015/4/27', '2015/5/4', '2015/5/11', '2015/5/18', '2015/5/25',
'2015/6/1', '2015/6/8', '2015/6/15', '2015/6/22', '2015/6/29', '2015/7/6', '2015/7/13', '2015/7/20', '2015/7/27', '2015/8/3', '2015/8/10',
'2015/8/17', '2015/8/24', '2015/8/31', '2015/9/7', '2015/9/14', '2015/9/21', '2015/9/28', '2015/10/5', '2015/10/12', '2015/10/19', '2015/10/26',
'2015/11/2', '2015/11/9', '2015/11/16', '2015/11/23', '2015/11/30', '2015/12/7', '2015/12/14', '2015/12/21', '2015/12/28', '2016/1/4', '2016/1/11',
'2016/1/18', '2016/1/25', '2016/2/1', '2016/2/8', '2016/2/15', '2016/2/22', '2016/2/29', '2016/3/7', '2016/3/14', '2016/3/21', '2016/3/28', '2016/4/4',
'2016/4/11', '2016/4/18', '2016/4/25', '2016/5/2', '2016/5/9', '2016/5/16', '2016/5/23', '2016/5/30', '2016/6/6', '2016/6/13', '2016/6/20', '2016/6/27',
'2016/7/4', '2016/7/11', '2016/7/18', '2016/7/25', '2016/8/1', '2016/8/8', '2016/8/15', '2016/8/22', '2016/8/29', '2016/9/5', '2016/9/12', '2016/9/19',
'2016/9/26', '2016/10/3', '2016/10/10', '2016/10/17', '2016/10/24', '2016/10/31', '2016/11/7', '2016/11/14', '2016/11/21', '2016/11/28', '2016/12/5',
'2016/12/12', '2016/12/19', '2016/12/26', '2017/1/2', '2017/1/9', '2017/1/16', '2017/1/23', '2017/1/30', '2017/2/6', '2017/2/13', '2017/2/20', '2017/2/27',
'2017/3/6', '2017/3/13', '2017/3/20', '2017/3/27', '2017/4/3', '2017/4/10', '2017/4/17', '2017/4/24', '2017/5/1', '2017/5/8', '2017/5/15', '2017/5/22',
'2017/5/29', '2017/6/5', '2017/6/12', '2017/6/19', '2017/6/26', '2017/7/3', '2017/7/10', '2017/7/17', '2017/7/24', '2017/7/31', '2017/8/7', '2017/8/14',
'2017/8/21', '2017/8/28', '2017/9/4', '2017/9/11', '2017/9/18', '2017/9/25', '2017/10/2', '2017/10/9', '2017/10/16', '2017/10/23', '2017/10/30', '2017/11/6',
'2017/11/13', '2017/11/20', '2017/11/27', '2017/12/4', '2017/12/11', '2017/12/18', '2017/12/25', '2018/1/1', '2018/1/8', '2018/1/15', '2018/1/22', '2018/1/29',
'2018/2/5', '2018/2/12', '2018/2/19', '2018/2/26', '2018/3/5', '2018/3/12', '2018/3/19', '2018/3/26', '2018/4/2', '2018/4/9', '2018/4/16', '2018/4/23',
'2018/4/30', '2018/5/7', '2018/5/14', '2018/5/21', '2018/5/28', '2018/6/4', '2018/6/11', '2018/6/18', '2018/6/25', '2018/7/2', '2018/7/9', '2018/7/16',
'2018/7/23', '2018/7/30', '2018/8/6', '2018/8/13', '2018/8/20', '2018/8/27', '2018/9/3', '2018/9/10', '2018/9/17', '2018/9/24', '2018/10/1', '2018/10/8',
'2018/10/15', '2018/10/22', '2018/10/29', '2018/11/5', '2018/11/12', '2018/11/19', '2018/11/26', '2018/12/3', '2018/12/10', '2018/12/17', '2018/12/24',
'2018/12/31', '2019/1/7', '2019/1/14', '2019/1/21', '2019/1/28', '2019/2/4', '2019/2/11', '2019/2/18', '2019/2/25', '2019/3/4', '2019/3/11', '2019/3/18',
'2019/3/25','2019/4/1', '2019/4/8', '2019/4/15', '2019/4/22', '2019/4/29'];
var data1 = [
227,322,290,284,279, 256, 240, 247, 230, 231, 208, 297, 140,194, 143,148,142, 240, 189,203,135, 151,186,169,137, 150, 185,163,165,196, 225,240,225,213, 241,
206, 205,221,236, 232, 207, 234,215, 205, 178, 170, 203, 181, 167, 158, 190, 282, 365, 221, 280, 373, 246, 249, 240, 184, 181, 225, 184, 174, 237, 218, 250, 202, 201,
220,193,172, 247, 171, 180, 158,167, 147,152, 176, 163, 160, 182, 201, 187, 194, 218, 203, 214, 201, 214, 207, 199, 209, 200, 180, 190, 175, 174,170, 209, 230, 274,
283,308, 491, 444, 497, 425, 395, 389, 371, 330, 320, 321, 302, 308, 291, 317, 310, 287, 290, 307, 302, 328, 323, 327, 289, 315, 321, 285, 299, 299, 311, 315, 312,
322, 303, 312, 285, 286, 270, 272, 263, 242, 219, 214, 231, 228, 231, 259, 195, 206, 263, 317, 264, 195, 281, 289, 335, 446, 305, 249, 246, 564, 401, 325, 559, 457,
425, 383, 394, 452, 257, 373, 332, 336, 389, 389, 499, 308, 321, 441, 399, 553, 455, 516, 526, 376, 310, 557, 251, 254, 252, 253, 251, 256, 257, 204, 225, 205, 242,
218, 196, 210, 250, 503, 573, 507, 528, 598, 523, 610, 584, 530, 449, 389, 358, 268, 256, 247, 204, 222, 203, 197, 204, 201, 204, 200, 204, 204, 204, 201, 201, 202,
199, 202, 200, 206, 232, 242, 236, 260, 285, 273, 281, 265, 249, 256, 245, 183, 201, 179, 180, 177, 152, 161, 200, 289, 362, 378, 422, 436, 444, 5795, 1691, 972, 622,
523];
var data2 = [
230, 916, 1085, 814, 759, 532, 400, 444, 397, 308, 227, 224, 217, 220, 207, 204, 217, 208, 201, 223, 200, 237, 222, 231, 239, 244, 225, 257, 229, 258, 397,
421, 352, 360, 444, 442, 439, 438, 439, 441, 439, 438, 442, 438, 400, 330, 325, 260, 354, 218, 445, 475, 457, 681, 1025, 1257, 1164, 477, 429, 339, 343, 385, 333, 282,
292, 396, 439, 414, 363, 300, 347, 359, 420, 285, 315, 316, 348, 312, 304, 402, 340, 276, 289, 343, 307, 358, 490, 530, 500, 532, 509, 512, 537, 463, 420, 371, 392, 397,
368, 359, 337, 420, 589, 723, 839, 1179, 828, 1434, 1142, 1170, 1033, 844, 467, 604, 621, 681, 578, 639, 585, 646, 474, 596, 588, 518, 562, 560, 590, 485, 564, 514, 538,
550, 617, 636, 640, 610, 660, 620, 631, 694, 791, 744, 755, 817, 572, 505, 659, 811, 477, 679, 730, 227, 774, 1662, 1652, 1473, 910, 686, 1024, 1749, 1745, 1071, 708, 594,
485, 550,541, 592, 494, 538, 636, 657, 602, 676, 688, 547, 489, 570, 586, 550, 570, 634, 625, 542, 652, 638, 562, 487, 655, 665, 630, 691, 689, 681, 688, 685, 690, 678,
516, 406,559, 555, 365, 284, 326, 339, 382, 627, 726, 1272, 1504, 1416, 1512, 1502, 1348, 1277, 1084, 783, 341, 333, 301, 256, 308, 266, 238, 307, 315, 283, 317, 283,
247,271, 260, 260, 307, 248, 245, 265, 318, 524, 538, 540, 535, 547, 518, 513, 486, 436, 464, 450, 417, 428, 414, 404, 392, 374, 260, 398, 464, 561, 886, 1295, 1839, 2028,
4517, 1680, 1046, 825, 582];
var data3 =[
945, 604, 613, 612, 609, 672, 735, 1749, 1304, 1733, 815, 1059, 903, 920, 971, 965, 1023, 1056, 903, 935, 827, 647, 668, 706, 775, 791, 672, 743, 527, 524,
548, 670, 817, 659, 918, 1236, 1211, 1091, 1134, 1352, 1268, 1279, 921, 1375, 779, 721, 680, 1035, 1347, 562, 777,756, 676, 689, 753, 672, 659, 667, 656, 706, 769, 673,
866,979,712, 806, 672, 675,676, 683, 676, 674, 686, 689, 11458, 2857, 1674, 1218, 1000, 887, 801, 754, 1039, 1225, 1192, 1218, 1306, 1270, 867, 1190, 1075, 890, 797,
1021,776, 757, 759, 740, 715, 708, 779, 900, 1040, 1034, 1023, 926, 958, 900, 1061, 1039, 1104, 1078, 1167, 1187, 1199, 1314, 1213, 1187, 1225, 1265, 1328, 1187, 1382,
1259, 1205, 1197, 1219, 1368, 1317, 1346, 1289, 1272, 1312, 1231, 1239, 1173, 1375, 1200, 1310, 1386, 1185, 1246, 1019, 1009, 998, 1000, 971, 953, 998, 999, 1003, 952,
1054, 1047, 1027, 977, 1029, 993, 1000, 1071, 1131, 1075, 1072, 1067, 1179, 1441, 1266, 1493, 1326, 1268, 1585, 1210, 1272, 1301, 1408, 1333, 1556, 1582, 1568, 1501,
1543, 1523, 1407, 1374, 1572, 1495, 1217, 1252, 1501, 1263, 1421, 1606, 1452, 1525, 1137, 1283, 1431, 1129, 1109, 1116, 1106, 1110, 1107, 1106, 1084, 1041, 1106, 1243,
1228, 1119, 1186, 1248, 1264, 1263, 1259, 1254, 1238, 1235, 1234, 1369, 1493, 1774, 1596, 1642, 1917, 1340, 1470, 1440, 1886, 1849, 1276, 1414, 1803, 1391, 1130, 1782,
1332, 1146,1001, 1852, 1949, 1963, 1884, 2000, 1981, 1973, 1962, 1879, 1761, 1721, 1610,1643, 1602, 1586, 1584, 1264, 1096, 1204, 1398, 1423, 1430, 1442, 1456, 1457,
8619, 3444, 2216, 2040, 1644];
var option = {
title: {
text: '媒体热词百度指数',
subtext: '数据来自百度指数\n（拖动时间轴可以选择时间范围）',
textStyle:{
color:'#fff'
},
x: 'center'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
} // 使图上有一条横线穿过
}
<!--axisPointer: {-->
<!--animation: false-->
<!--}-->//图上的横线取消
},
legend: {
data:['森林防火','森林火灾','消防员'],
x:'left',
textStyle:{
color:'#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true