全国疫情统计可视化地图-第二、三阶段

第二阶段目标：疫情统计地图可视化：可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。在全国地图上使用不同的颜色代表大概确诊人数区间，颜色的深浅表示疫情的严重程度，可以直观了解高危区域；鼠标移到每个省份会高亮显示、点击鼠标会显示该省具体疫情情况、点击某个省份显示该省疫情的具体情况、显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；确诊人数。

第三阶段目标：鼠标移到每个市会高亮显示，并且显示简单的数据；数据下钻：单击各个省可以下钻到各个地市的数据显示

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6   <title>疫情地图展示</title>
  7   <style>
  8     .container {
  9       width: 1200px;
 10       margin: 0 auto;
 11     }
 12 
 13     #myEcharts {
 14       width: 800px;
 15       height: 500px;
 16       border: solid 1px red;
 17       margin: 0 auto;
 18     }
 19   </style>
 20   <script src="https://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>
 21   <!-- 引入 echarts.js -->
 22   <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1578305236132"></script>
 23   <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
 24   <script src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1578305236132"></script>
 25 
 26 </head>
 27 
 28 <body>
 29   <div class="container">
 30     <h3>累计确诊人数如下：</h3>
 31     <!--为echarts准备一个dom容器-->
 32     <div id="myEcharts"></div>
 33   </div>
 34 
 35 
 36   <script>
 37     //初始化echarts实例
 38     var myChart = echarts.init(document.getElementById(\'myEcharts\'));
 39     // 指定图表的配置项和数据
 40     option = {
 41       title: {
 42         text: \'中国疫情图\',
 43         left: \'center\'
 44       },
 45       tooltip: {
 46         trigger: \'item\'
 47       },
 48       legend: {
 49         orient: \'vertical\',
 50         left: \'left\',
 51         data: [\'中国疫情图\']
 52       },
 53       visualMap: {
 54         type: \'piecewise\',
 55         pieces: [
 56           { min: 1000, max: 1000000, label: \'大于等于1000人\', color: \'#372a28\' },
 57           { min: 500, max: 999, label: \'确诊500-999人\', color: \'#4e160f\' },
 58           { min: 100, max: 499, label: \'确诊100-499人\', color: \'#974236\' },
 59           { min: 10, max: 99, label: \'确诊10-99人\', color: \'#ee7263\' },
 60           { min: 1, max: 9, label: \'确诊1-9人\', color: \'#f5bba7\' },
 61         ],
 62         color: [\'#E0022B\', \'#E09107\', \'#A3E00B\']
 63       },
 64       toolbox: {
 65         show: true,
 66         orient: \'vertical\',
 67         left: \'right\',
 68         top: \'center\',
 69         feature: {
 70           mark: { show: true },
 71           dataView: { show: true, readOnly: false },
 72           restore: { show: true },
 73           saveAsImage: { show: true }
 74         }
 75       },
 76       roamController: {
 77         show: true,
 78         left: \'right\',
 79         mapTypeControl: {
 80           \'china\': true
 81         }
 82       },
 83       series: [
 84         {
 85           name: \'确诊数\',
 86           type: \'map\',
 87           mapType: \'china\',
 88           roam: false,
 89           label: {
 90             show: true,
 91             color: \'rgb(249, 249, 249)\'
 92           },
 93           data: []
 94         }
 95       ]
 96     };
 97 
 98     //使用指定的配置项和数据显示图表
 99     myChart.setOption(option);
100 
101     //获取数据
102     function getData() {
103       $.ajax({
104         url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
105         dataType: "jsonp",
106         success: function (data) {
107           //  console.log(data.data)
108           var res = data.data || "";
109           res = JSON.parse(res);
110           var newArr = [];
111           //newArr的数据格式为：
112           // [{
113           //   name: \'北京11\',
114           //   value: 212
115           // }, {
116           //   name: \'天津\',
117           //   value: 60
118           // }]
119           if (res) {
120             //获取到各个省份的数据
121             var province = res.areaTree[0].children;
122             for (var i = 0; i < province.length; i++) {
123               var json = {
124                 name: province[i].name,
125                 value: province[i].total.confirm
126               }
127               newArr.push(json)
128             }
129             console.log(newArr)
130             console.log(JSON.stringify(newArr))
131             //使用指定的配置项和数据显示图表
132             myChart.setOption({
133               series: [
134                 {
135                   name: \'确诊数\',
136                   type: \'map\',
137                   mapType: \'china\',
138                   roam: false,
139                   label: {
140                     show: true,
141                     color: \'rgb(249, 249, 249)\'
142                   },
143                   data: newArr
144                 }
145               ]
146             });
147           }
148         }
149 
150       })
151     }
152     getData();
153 
154   </script>
155 </body>
156 </html>

Echarts.jsp