全國疫情統計可視化圖表

第一階段目標：
導入全國疫情數據庫payiqing.sql（MySQL數據庫）。
可以按照時期查詢各個省市的疫情統計表格。
以折線圖或柱狀圖展示某天的全國各省的確診人數。

 

隨題目還有一個payiqing.sql數據庫文件，當時導入數據時提示“1273 - Unknown collation: 'utf8mb4_0900_ai_ci'”錯誤。當時也是一頭霧水，這其實是排序規則不一致的錯誤，但是創建數據庫時又仔細找了好多遍都沒有發現這個所謂的'utf8mb4_0900_ai_ci'，所以想着能不能把它里面的排序規則都更改一下，試試能不能成功。果然，將SQL文件里的'utf8mb4_0900_ai_ci'全部改成'utf8mb4_general_ci'就可以導入了。（每個表都要改！！！）

 

 

 

接下來又是愉快的發愁寫代碼的問題，做為一塊白板還是要借助這個牛皮哄哄的網站：https://www.echartsjs.com/zh/index.html

生成圖表什么的事情交給這個網站就可以了，它自動生成代碼，自己再改一改參數，完全ok了！！！

下面就是從數據庫里取數據了，代碼如下：

 

//Data.java
package Dao;

public class Data {

    private String pri;
    private String confirmnum;
    
    public Data() {
        // TODO Auto-generated constructor stub
    }

    public String getPri() {
        return pri;
    }

    public void setPri(String pri) {
        this.pri = pri;
    }

    public String getConfirmnum() {
        return confirmnum;
    }

    public void setConfirmnum(String confirmnum) {
        this.confirmnum = confirmnum;
    }

}

//DBUtil.java
package MyDBUtil;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class DBUtil {

    private static String URL="jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC";
    private static String username="root";
    private static String password="0000";
    public static Connection getConnection() {
        Connection connection=null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        try {
            connection=DriverManager.getConnection(URL, username, password);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return connection;
    }
    public DBUtil() {
        // TODO Auto-generated constructor stub
    }

    public static String getData(String date) {
        JSONArray jsonArray=new JSONArray();
        Connection connection=getConnection();
        String sql="select distinct Province from info where Date like '"+date+"%'";
        String tempprovince="";
        ResultSet rs=null;
        try {
            Statement statement=connection.createStatement();
            rs=statement.executeQuery(sql);
            while(rs.next())
                tempprovince+=rs.getString("Province")+";";
            rs.close();
            String str[]=tempprovince.split(";");
            for(int i=0;i<str.length;i++) {
                if(str[i].trim().equals(""))
                    continue;
                sql="select sum(Confirmed_num),sum(Yisi_num),sum(Cured_num),sum(Dead_num) from info where Date like '"+date+"%' and Province='"+str[i]+"'";
                rs=statement.executeQuery(sql);
                rs.next();
                JSONObject json=new JSONObject();
                json.put("name", str[i]);
                json.put("num", rs.getInt(1));
                json.put("yisi", rs.getString(2));
                json.put("cure", rs.getString(3));
                json.put("dead", rs.getString(4));
                rs.close();
                sql="select * from info where Date like '"+date+"%' and Province='"+str[i]+"'";
                rs=statement.executeQuery(sql);
                rs.next();
                json.put("code", rs.getString("Code"));
                rs.close();
                jsonArray.add(json);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return jsonArray.toString();
    }
    
    
}

//getData.javapackage Servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import MyDBUtil.*;

/**
 * Servlet implementation class getData
 */
@WebServlet("/getData")
public class getData extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getData() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
//        doGet(request, response);
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(DBUtil.getData(request.getParameter("date")));
    }

}

下面是顯示界面：

//main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>

<title>Insert title here</title>
</head>
<body>
<input type="date" name="date"><button>查詢</button>
<div id="main" style="width: 100%;height:550px;overflow: auto;"></div>
    <script type="text/javascript">
    
        // 基於准備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
       

        myChart.showLoading();
        
        var names=[];
        var nums=[];
        $("button").click(function(){
            $.post(
                'http://localhost:8080/yiqing/getData',
                {"date":$("input[name=date]").val()},
                function(msg){
                    var json=JSON.parse(msg);
                    var size=json.length;
                    for(i=0;i<size;i++){
                        names.push(json[i].name);
                        nums.push(parseInt(json[i].num));
                    }
                
                    myChart.hideLoading();
                    var option = {
                            title: {
                                text: $("input[name=date]").val()+'確診人數'
                            },
                            tooltip: {},
                            legend: {
                                data:['確診人數']
                            },
                            xAxis: {
                                data: names
                            },
                            yAxis: {},
                            series: [{
                                name: '確診人數',
                                type: 'bar',
                                data: nums
                            }]
                        };
                    myChart.setOption(option);
                    tr="<tr><th>省份</th><th>確診人數</th><th>疑似人數</th><th>治愈人數</th><th>死亡人數</th><th>編碼</th></tr>";
                    $('.head').append(tr);
                    for(i=0;i<size;i++)
                        $('.main').append("<tr></tr>");
                    $('.main tr').each(function(i){
                        $(this).append("<td>"+json[i].name+"</td>");
                        $(this).append("<td>"+json[i].num+"</td>");
                        $(this).append("<td>"+json[i].yisi+"</td>");
                        $(this).append("<td>"+json[i].cure+"</td>");
                        $(this).append("<td>"+json[i].dead+"</td>");
                        $(this).append("<td>"+json[i].code+"</td>");
                    })
                }
                
            )
        })
        
    </script>
    <table class="layui-table">
        <thead class="head">
            </thead>
        <tbody class="main"></tbody>
    </table>
</body>
</html>

注意這里用到了Layui，並且用了echarts圖表，所以需要導入相應的文件

 

 

這里只是info表的柱形圖，顯示效果如下：

這里也可以看到圖並不是很美觀並且省份的標識也有偏差，這都是需要改進的地方。

我感覺背后還隱藏着超多bug。。。。