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