全國疫情可視化頁面

本文轉載自查看原文 2020-03-11 20:50 640

一、題目要求：

二、布局

（隨題目還有一個payiqing.sql數據庫文件，當時導入數據時提示“1273 - Unknown collation: 'utf8mb4_0900_ai_ci'”錯誤。將SQL文件里的'utf8mb4_0900_ai_ci'全部改成'utf8mb4_general_ci'就可以導入了）

三、步驟

1、在項目中使用了layui資源文件（下載地址https://www.layui.com/）和百度可視化報表，所以需要導入相關庫，還需導入相關jar包。

2、使用折線圖顯示全國各省的確診人數

3、通過時間查詢相應的確診人數

話不多說上代碼

四、代碼

main.html

 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.js"></script>
 8 <script src="js/jquery.js"></script>
 9 
10 <title>Insert title here</title>
11 </head>
12 <body>
13 <input type="date" name="date"><button>查詢</button>
14 <div id="main" style="width: 100%;height:550px;overflow: auto;"></div>
15 <script type="text/javascript">
16 
17 // 基於准備好的dom，初始化echarts實例
18 var myChart = echarts.init(document.getElementById('main'),'light');
19 
20 // 指定圖表的配置項和數據
21 
22 
23 $("button").click(function(){
24 var names=[];
25 var nums=[];
26 $('.head').html("");
27 $('.main').html("");
28 myChart.showLoading();
29 $.post(
30 'http://localhost:8080/yiqing/getData',
31 {"date":$("input[name=date]").val()},
32 function(msg){
33 var json=JSON.parse(msg);
34 var size=json.length;
35 for(i=0;i<size;i++){
36 names.push(json[i].name);
37 nums.push(parseInt(json[i].num));
38 }
39 
40 
41 var option = {
42 title: {
43 text: $("input[name=date]").val()+'確診人數'
44 },
45 tooltip: {},
46 legend: {
47 data:['確診人數']
48 },
49 xAxis: {
50 
51 axisLabel: {interval:0,rotate:30 },
52 data: names
53 },
54 yAxis: {},
55 series: [{
56 name: '確診人數',
57 type: 'line',
58 data: nums
59 }]
60 };
61 myChart.setOption(option);
62 myChart.hideLoading();
63 tr="<tr><th>省份</th><th>確診人數</th><th>疑似人數</th><th>治愈人數</th><th>死亡人數</th><th>編碼</th></tr>";
64 $('.head').append(tr);
65 for(i=0;i<size;i++)
66 $('.main').append("<tr></tr>");
67 $('.main tr').each(function(i){
68 $(this).append("<td>"+json[i].name+"</td>");
69 $(this).append("<td>"+json[i].num+"</td>");
70 $(this).append("<td>"+json[i].yisi+"</td>");
71 $(this).append("<td>"+json[i].cure+"</td>");
72 $(this).append("<td>"+json[i].dead+"</td>");
73 $(this).append("<td>"+json[i].code+"</td>");
74 })
75 }
76 
77 )
78 })
79 
80 </script>
81 <table class="layui-table">
82 <thead class="head">
83 </thead>
84 <tbody class="main"></tbody>
85 </table>
86 </body>
87 </html>

實體類：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;
    }

}

DAO層和servlet層寫在了一起：

package 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")));
    }

}

package 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.DBUtil;

/**
 * Servlet implementation class getEvery
 */
@WebServlet("/getEvery")
public class getEvery extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public getEvery() {
        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.getEveryData(request.getParameter("date"), request.getParameter("code")));
    }

}

五、運行結果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 全國疫情統計可視化地圖全國疫情統計可視化圖表全國疫情統計可視化地圖（1）全國疫情可視化地圖（一）全國疫情可視化圖表全國疫情統計可視化地圖（3）全國疫情統計可視化（實時）全國疫情可視化圖表全國疫情統計可視化地圖全國疫情統計可視化（圖表）