全球疫情可视化展示
全球疫情数据可视化展示:
一:任务目标
1、实现全球疫情数据的爬取
2、实现疫情数据的展示
3、实现疫情数据可视化展示
4、实现外网访问
二 :源码
1、python爬虫代码:
# @Author: GMaya import requests, json, jsonpath # 创建会话对象 session = requests.session() # 请求接口 result = session.get('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist') # 打印结果 print(result.text) # 解析json结果 resJson = json.loads(result.text) data = jsonpath.jsonpath(resJson, '$.data.*') for d in data: res = '日期:' + d['date'] + '--' + d['continent'] + '--' + d['name'] + '--' + '新增确诊:' + str( d['confirmAdd']) + '累计确诊:' + str(d['confirm']) + '治愈:' + str(d['heal']) + '死亡:' + str(d['dead']) # 保存数据到我的d盘 file = 'D:\download\global-yq.txt' with open(file, 'a+',encoding='utf-8') as f: f.write(res + '\n') # 加\n换行显示
这部分我参考的是https://blog.csdn.net/gfl1427097103/article/details/105278146/;有一些配置上的问题,大家可以参考一下。
2、JSP:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 4 <%@page import="com.bean.Data" %> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <meta charset="ISO-8859-1"> 9 <title>世界疫情</title> 10 </head> 11 12 <meta charset="UTF-8"> 13 <link type="text/css" rel="stylesheet" href="css/style.css"> 14 <script src="js/jquery-3.4.1.min.js"></script> 15 <script src="js/echarts.min.js"></script> 16 <script src="js/world.js"></script> 17 18 <style> 19 *{margin:0;padding:0} 20 html,body{ 21 width:100%; 22 height:100%; 23 } 24 #main{ 25 width:1500px; 26 height:1350px; 27 margin: 450px auto; 28 border:1px solid #ddd; 29 } 30 /*默认长宽比0.75*/ 31 </style> 32 </head> 33 34 <body onload="checkfind()"> 35 <br> 36 <h1>疫情统计表</h1> 37 <br> 38 <br> 39 <br> 40 <div id="h"> 41 <span> 42 <script>document.write(time);</script> 43 </span> 44 </div> 45 46 <div id="table"> 47 48 49 50 </div> 51 <div id="main"> 52 53 </div> 54 <script type="text/javascript"> 55 56 57 function randomValue() { 58 return Math.round(Math.random()*1000); 59 } 60 var dt; 61 var data = new Array(0); 62 myDate = new Date(); 63 var y = myDate.getFullYear(); 64 var m = myDate.getMonth()+1;//获取当前月份的日期 65 if(m<10){ 66 m='0'+m; 67 } 68 var d = myDate.getDate(); 69 if(d<10){ 70 d='0'+d; 71 } 72 var time = y+"-"+m+"-"+d; 73 $("#h").html(time); 74 function checkfind() { 75 76 77 if(time=="") 78 { 79 alert("请输入时间!"); 80 return ; 81 } 82 else{ 83 84 85 $.ajax({ 86 url : "WorldDataServlet", 87 async : true, 88 type : "POST", 89 data : { 90 "time" : time 91 }, 92 dataType : "json", 93 success : function(json) { 94 95 96 for (var i = 0; i < json.length; i++) { 97 var d = {}; 98 99 d["name"] = json[i].Province; 100 d["value"] = json[i].Confirmed_num; 101 d["yisi_num"] = json[i].Yisi_num; 102 d["cured_num"] = json[i].Cured_num; 103 d["dead_num"] = json[i].Dead_num; 104 105 106 data.push(d); 107 } 108 109 110 var myChart = echarts.init(document.getElementById('main')); 111 function randomValue() { 112 return Math.round(Math.random()*1000); 113 } 114 var optionMap = { 115 backgroundColor : '#FFFFFF', 116 title : { 117 text : '世界疫情', 118 subtext : '', 119 x : 'center' 120 }, 121 tooltip : { 122 formatter : function(params) { 123 return params.name + '<br/>' + '确诊人数 : ' 124 + params.value + '<br/>' + '死亡人数 : ' 125 + params['data'].dead_num + '<br/>' + '治愈人数 : ' 126 + params['data'].cured_num + '<br/>'+ '疑似患者人数 : ' 127 + params['data'].yisi_num; 128 } 129 }, 130 131 //左侧小导航图标 132 visualMap: { 133 min: 0, 134 max: 350000, 135 left: 'left', 136 top: 'bottom', 137 text: ['高','低'],//取值范围的文字 138 inRange: { 139 color: ['yellow','orangered','red']//取值范围的颜色 140 }, 141 show:true//图注 142 }, 143 144 145 //配置属性 146 series : [ { 147 type : 'map', 148 mapType : 'world', 149 label : { 150 show : true 151 }, 152 153 zoom: 1, //当前视角的缩放比例 154 155 roam: true, //是否开启平游或缩放 156 157 scaleLimit: { //滚轮缩放的极限控制 158 159 min: 1, 160 161 max: 2 162 163 }, 164 data : data, 165 nameMap : { 166 167 'Singapore Rep.':'新加坡', 168 'Dominican Rep.':'多米尼加', 169 'Palestine':'巴勒斯坦', 170 'Bahamas':'巴哈马', 171 'Timor-Leste':'东帝汶', 172 'Afghanistan':'阿富汗', 173 'Guinea-Bissau':'几内亚比绍', 174 "Côte d'Ivoire":'科特迪瓦', 175 'Siachen Glacier':'锡亚琴冰川', 176 "Br. Indian Ocean Ter.":'英属印度洋领土', 177 'Angola':'安哥拉', 178 'Albania':'阿尔巴尼亚', 179 'United Arab Emirates':'阿联酋', 180 'Argentina':'阿根廷', 181 'Armenia':'亚美尼亚', 182 'French Southern and Antarctic Lands':'法属南半球和南极领地', 183 'Australia':'澳大利亚', 184 'Austria':'奥地利', 185 'Azerbaijan':'阿塞拜疆', 186 'Burundi':'布隆迪', 187 'Belgium':'比利时', 188 'Benin':'贝宁', 189 'Burkina Faso':'布基纳法索', 190 'Bangladesh':'孟加拉国', 191 'Bulgaria':'保加利亚', 192 'The Bahamas':'巴哈马', 193 'Bosnia and Herz.':'波斯尼亚和黑塞哥维那', 194 'Belarus':'白俄罗斯', 195 'Belize':'伯利兹', 196 'Bermuda':'百慕大', 197 'Bolivia':'玻利维亚', 198 'Brazil':'巴西', 199 'Brunei':'文莱', 200 'Bhutan':'不丹', 201 'Botswana':'博茨瓦纳', 202 'Central African Rep.':'中非', 203 'Canada':'加拿大', 204 'Switzerland':'瑞士', 205 'Chile':'智利', 206 'China':'中国', 207 'Ivory Coast':'象牙海岸', 208 'Cameroon':'喀麦隆', 209 'Dem. Rep. Congo':'刚果民主共和国', 210 'Congo':'刚果', 211 'Colombia':'哥伦比亚', 212 'Costa Rica':'哥斯达黎加', 213 'Cuba':'古巴', 214 'N. Cyprus':'北塞浦路斯', 215 'Cyprus':'塞浦路斯', 216 'Czech Rep.':'捷克', 217 'Germany':'德国', 218 'Djibouti':'吉布提', 219 'Denmark':'丹麦', 220 'Algeria':'阿尔及利亚', 221 'Ecuador':'厄瓜多尔', 222 'Egypt':'埃及', 223 'Eritrea':'厄立特里亚', 224 'Spain':'西班牙', 225 'Estonia':'爱沙尼亚', 226 'Ethiopia':'埃塞俄比亚', 227 'Finland':'芬兰', 228 'Fiji':'斐', 229 'Falkland Islands':'福克兰群岛', 230 'France':'法国', 231 'Gabon':'加蓬', 232 'United Kingdom':'英国', 233 'Georgia':'格鲁吉亚', 234 'Ghana':'加纳', 235 'Guinea':'几内亚', 236 'Gambia':'冈比亚', 237 'Guinea Bissau':'几内亚比绍', 238 'Eq. Guinea':'赤道几内亚', 239 'Greece':'希腊', 240 'Greenland':'格陵兰', 241 'Guatemala':'危地马拉', 242 'French Guiana':'法属圭亚那', 243 'Guyana':'圭亚那', 244 'Honduras':'洪都拉斯', 245 'Croatia':'克罗地亚', 246 'Haiti':'海地', 247 'Hungary':'匈牙利', 248 'Indonesia':'印度尼西亚', 249 'India':'印度', 250 'Ireland':'爱尔兰', 251 'Iran':'伊朗', 252 'Iraq':'伊拉克', 253 'Iceland':'冰岛', 254 'Israel':'以色列', 255 'Italy':'意大利', 256 'Jamaica':'牙买加', 257 'Jordan':'约旦', 258 'Japan':'日本', 259 'Kazakhstan':'哈萨克斯坦', 260 'Kenya':'肯尼亚', 261 'Kyrgyzstan':'吉尔吉斯斯坦', 262 'Cambodia':'柬埔寨', 263 'Korea':'韩国', 264 'Kosovo':'科索沃', 265 'Kuwait':'科威特', 266 'Lao PDR':'老挝', 267 'Lebanon':'黎巴嫩', 268 'Liberia':'利比里亚', 269 'Libya':'利比亚', 270 'Sri Lanka':'斯里兰卡', 271 'Lesotho':'莱索托', 272 'Lithuania':'立陶宛', 273 'Luxembourg':'卢森堡', 274 'Latvia':'拉脱维亚', 275 'Morocco':'摩洛哥', 276 'Moldova':'摩尔多瓦', 277 'Madagascar':'马达加斯加', 278 'Mexico':'墨西哥', 279 'Macedonia':'马其顿', 280 'Mali':'马里', 281 'Myanmar':'缅甸', 282 'Montenegro':'黑山', 283 'Mongolia':'蒙古', 284 'Mozambique':'莫桑比克', 285 'Mauritania':'毛里塔尼亚', 286 'Malawi':'马拉维', 287 'Malaysia':'马来西亚', 288 'Namibia':'纳米比亚', 289 'New Caledonia':'新喀里多尼亚', 290 'Niger':'尼日尔', 291 'Nigeria':'尼日利亚', 292 'Nicaragua':'尼加拉瓜', 293 'Netherlands':'荷兰', 294 'Norway':'挪威', 295 'Nepal':'尼泊尔', 296 'New Zealand':'新西兰', 297 'Oman':'阿曼', 298 'Pakistan':'巴基斯坦', 299 'Panama':'巴拿马', 300 'Peru':'秘鲁', 301 'Philippines':'菲律宾', 302 'Papua New Guinea':'巴布亚新几内亚', 303 'Poland':'波兰', 304 'Puerto Rico':'波多黎各', 305 'Dem. Rep. Korea':'朝鲜', 306 'Portugal':'葡萄牙', 307 'Paraguay':'巴拉圭', 308 'Qatar':'卡塔尔', 309 'Romania':'罗马尼亚', 310 'Russia':'俄罗斯', 311 'Rwanda':'卢旺达', 312 'W. Sahara':'西撒哈拉', 313 'Saudi Arabia':'沙特阿拉伯', 314 'Sudan':'苏丹', 315 'S. Sudan':'南苏丹', 316 'Senegal':'塞内加尔', 317 'Solomon Is.':'所罗门群岛', 318 'Sierra Leone':'塞拉利昂', 319 'El Salvador':'萨尔瓦多', 320 'Somaliland':'索马里兰', 321 'Somalia':'索马里', 322 'Serbia':'塞尔维亚', 323 'Suriname':'苏里南', 324 'Slovakia':'斯洛伐克', 325 'Slovenia':'斯洛文尼亚', 326 'Sweden':'瑞典', 327 'Swaziland':'斯威士兰', 328 'Syria':'叙利亚', 329 'Chad':'乍得', 330 'Togo':'多哥', 331 'Thailand':'泰国', 332 'Tajikistan':'塔吉克斯坦', 333 'Turkmenistan':'土库曼斯坦', 334 'East Timor':'东帝汶', 335 'Trinidad and Tobago':'特里尼达和多巴哥', 336 'Tunisia':'突尼斯', 337 'Turkey':'土耳其', 338 'Tanzania':'坦桑尼亚', 339 'Uganda':'乌干达', 340 'Ukraine':'乌克兰', 341 'Uruguay':'乌拉圭', 342 'United States':'美国', 343 'Uzbekistan':'乌兹别克斯坦', 344 'Venezuela':'委内瑞拉', 345 'Vietnam':'越南', 346 'Vanuatu':'瓦努阿图', 347 'West Bank':'西岸', 348 'Yemen':'也门', 349 'South Africa':'南非', 350 'Zambia':'赞比亚', 351 'Zimbabwe':'津巴布韦' 352 } 353 354 } ] 355 }; 356 myChart.setOption(optionMap); 357 myChart.on('click', function (params) { 358 alert(params.name); 359 }); 360 361 362 alert("成功!"); 363 364 365 //使用制定的配置项和数据显示图表 366 createShowingTable(json); 367 368 }, 369 error : function() { 370 alert("请求失败"); 371 }, 372 }); 373 } 374 375 } 376 /* setTimeout(function () { 377 myChart.setOption({ 378 series : [ 379 { 380 name: '信息量', 381 type: 'map', 382 geoIndex: 0, 383 data:dataList 384 } 385 ] 386 }); 387 },1000)*/ 388 function createShowingTable(json) { 389 var tableStr = "<table id='gradient-style' style='background-color:blue; width:100%; height:100%'>"; 390 tableStr = tableStr 391 + "<tr>" 392 393 +"<td >国家</td>" 394 +"<td >确诊人数</td>" 395 +"<td >疑似人数</td>" 396 +"<td >治愈人数</td>" 397 +"<td >死亡人数</td>" 398 +"</tr>"; 399 var len = data.length; 400 for ( var i = 0; i < len; i++) { 401 tableStr = tableStr + "<tr>" 402 403 +"<td>"+ json[i].Province +"</td>" 404 +"<td>"+ json[i].Confirmed_num + "</td>" 405 + "<td>"+ json[i].Yisi_num + "</td>" 406 + "<td>"+ json[i].Cured_num + "</td>" 407 +"<td>"+json[i].Dead_num+"</td>" 408 +"</tr>"; 409 } 410 411 tableStr = tableStr + "</table>"; 412 //添加到div中 413 $("#table").html(tableStr);1 414 } 415 416 </script> 417 418 419 </body> 420 </html>
三:遇到的问题
首先是world.js资源难找,附上我的资源链接:
https://pan.baidu.com/s/1tZkCm06wZpfH4MBvf9gDnw 提取码: bvy3

浙公网安备 33010602011771号