全国疫情可视化页面

本文转载自查看原文 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）全国疫情统计可视化（实时）全国疫情可视化图表全国疫情统计可视化地图全国疫情统计可视化（图表）