全国疫情统计可视化(实时)

问题描述

  根据上次题目的基础上新增要求如下:

  

 

问题分析

  python爬取数据存入数据库,修改之前的代码显示最新数据即可。

 

源码

  python部分(sql的最好做法应该是先删除再插入)

 1 # coding=utf-8
 2 import pymysql
 3 import requests
 4 import json
 5 
 6 url = "https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=316765403234"
 7 header = {"user-agent": "Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 ("
 8                         "KHTML, like Gecko) Chrome/80.0.3987.116 Mobile Safari/537.36"}
 9 response = requests.get(url, headers=header)
10 mydir = json.loads(response.content.decode())
11 # 数据库的连接
12 db = pymysql.connect(host='localhost', port=3306, user='root', passwd='123456', db='yiqing', charset='utf8')
13 
14 # 使用cursor方法创建一个游标
15 cursor = db.cursor()
16 # mydir['data']['areaTree'][0]['children']再往后是省份
17 # print(mydir['data']['areaTree'][0]['children'][33])
18 for item in mydir['data']['areaTree'][0]['children']:
19     name = item['name']
20     confirm = item['total']['confirm']
21     severe = item['total']['severe']
22     heal = item['total']['heal']
23     dead = item['total']['dead']
24     suspect = item['total']['suspect']
25     idcode = item['id']
26     lastUpdateTime = item['lastUpdateTime']
27     # 插入数据
28     # sql = "insert into pythontest(id,name,confirm,suspect,heal,dead,severe,idcode,lastupdatetime) " \
29     #       "values ({},'{}','{}','{}','{}','{}','{}','{}','{}');".format(
30     #     0, name, confirm, suspect, heal, dead, severe, idcode, lastUpdateTime)
31     
32     # 更新数据
33     sql = "update realtime set confirm='{}',suspect='{}',heal='{}',dead='{}',severe='{}',lastupdatetime='{}'" \
34           " where idcode='{}'".format(confirm, suspect, heal, dead, severe, lastUpdateTime, idcode)
35     print(sql)
36     cursor.execute(sql)
37     db.commit()

  web方面,在上次的基础上修改。

  数据库工具类DBUtil添加如下方法用于读取数据:

 1 public static String queryLatestData()
 2     {
 3         Connection connection = null;
 4         PreparedStatement preparedStatement = null;
 5         ResultSet resultSet = null;
 6         JSONArray jsonArray = new JSONArray();
 7         String sql = "select * from realtime";
 8         
 9         try {
10             connection = getConnection();
11             preparedStatement = connection.prepareStatement(sql);
12             resultSet = preparedStatement.executeQuery();
13             while (resultSet.next()) {
14                 JSONObject jsonObject = new JSONObject();
15                 jsonObject.put("name", resultSet.getString(2));
16                 jsonObject.put("confirm", resultSet.getString(3));
17                 jsonObject.put("suspect", resultSet.getString(4));
18                 jsonObject.put("heal", resultSet.getString(5));
19                 jsonObject.put("dead", resultSet.getString(6));
20                 jsonObject.put("severe", resultSet.getString(7));
21                 jsonObject.put("idcode", resultSet.getString(8));
22                 jsonObject.put("lastupdatetime", resultSet.getString(9));
23                 jsonArray.add(jsonObject);
24             }
25             return jsonArray.toString();
26         } catch (Exception e) {
27             return null;
28         }
29     }

 

  servlet,变化的只是改成调用上述方法

  主页面,适当修改ajax即可

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6 <link rel="stylesheet" href="layui/css/layui.css">
  7 <script src="js/echarts.min.js"></script>
  8 <script src="js/jquery.min.js"></script>
  9 <script type="text/javascript">
 10             function getLatestDate() {
 11                 var date = new Date();
 12                 var seperator1 = "-";
 13                 var seperator2 = ":";
 14                 var month = date.getMonth() + 1;
 15                 var strDate = date.getDate();
 16                 if(month >= 1 && month <= 9) {
 17                     month = "0" + month;
 18                 }
 19                 if(strDate >= 0 && strDate <= 9) {
 20                     strDate = "0" + strDate;
 21                 }
 22                 var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
 23 
 24                 document.getElementById("span1").innerHTML="<font color='red'>"+currentdate+"</font>";
 25             }
 26         </script>
 27 <style>
 28             #top {
 29                 width: auto;
 30                 height: 30px;
 31                 text-align: center;
 32                 margin: auto;
 33                 padding-top: 5px;
 34                 background-color: gray;
 35             }
 36         </style>
 37 <title>YiQing</title>
 38 </head>
 39 <body onload="getLatestDate()">
 40 
 41     <div id="top">
 42             <span id="span1"></span>&nbsp;最新疫情信息:<button>查询</button>
 43     </div>
 44     
 45     <div id="main" style="width: 100%;height:550px;overflow: auto;"></div>
 46     <script type="text/javascript">
 47          var myChart = echarts.init(document.getElementById('main'));
 48          myChart.showLoading();
 49          var names=[];
 50          var nums=[];
 51         $("button").click(function(){
 52             var date = new Date();
 53             var seperator1 = "-";
 54             var seperator2 = ":";
 55             var month = date.getMonth() + 1;
 56             var strDate = date.getDate();
 57             if(month >= 1 && month <= 9) {
 58                 month = "0" + month;
 59             }
 60             if(strDate >= 0 && strDate <= 9) {
 61                 strDate = "0" + strDate;
 62             }
 63             var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
 64             
 65             names=[];
 66             nums=[];
 67             $(".head").empty();
 68             $(".main").empty();
 69             $.post(
 70                 'http://localhost:8086/yiqing/queryDataServlet',
 71                 function(msg){
 72                     var json=JSON.parse(msg);
 73                     var size=json.length;
 74                     for(i=0;i<size;i++){
 75                         names.push(json[i].name);
 76                         nums.push(parseInt(json[i].confirm));
 77                     }
 78                 
 79                     myChart.hideLoading();
 80                     var option = {
 81                             title: {
 82                                 text: currentdate+'确诊人数'
 83                             },
 84                             tooltip: {},
 85                             legend: {
 86                                 data:['确诊人数']
 87                             },
 88                             grid: {  
 89                                 y2: 150  
 90                             },
 91                             xAxis: {
 92                                 type : 'category',
 93                                 data: names,
 94                                 axisLabel:{  
 95                                     interval:0,
 96                                     rotate:-17,
 97                                     }
 98                             },
 99                             yAxis: {},
100                             series: [{
101                                 name: '确诊人数',
102                                 type: 'bar',
103                                 data: nums
104                             }]
105                         };
106                     myChart.setOption(option);
107                     tr="<tr><th>省份</th><th>确诊人数</th><th>疑似人数</th><th>治愈人数</th><th>死亡人数</th><th>重症人数</th><th>编码</th><th>更新时间</th></tr>";
108                     $('.head').append(tr);
109                     for(i=0;i<size;i++)
110                         $('.main').append("<tr></tr>");
111                     $('.main tr').each(function(i){
112                         $(this).append("<td>"+json[i].name+"</td>");
113                         $(this).append("<td>"+json[i].confirm+"</td>");
114                         $(this).append("<td>"+json[i].suspect+"</td>");
115                         $(this).append("<td>"+json[i].heal+"</td>");
116                         $(this).append("<td>"+json[i].dead+"</td>");
117                         $(this).append("<td>"+json[i].severe+"</td>")
118                         $(this).append("<td>"+json[i].idcode+"</td>");
119                         $(this).append("<td>"+json[i].lastupdatetime+"</td>");
120                     })
121                 }
122                 
123             )
124         })
125     </script>
126     <table class="layui-table">
127         <thead class="head">
128             </thead>
129         <tbody class="main"></tbody>
130     </table>
131 </body>
132 </html>

结果样例

 

 

PSP

 

posted on 2020-03-11 21:30  pjhhh  阅读(3855)  评论(0编辑  收藏  举报