全国疫情统计可视化（图表）

题目描述

问题分析

使用Echarts处理柱形图

源码

　　前台的目录结构

 　　构建路径

后台的路径

后台的代码

package com.pjh.DBUtils;

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

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

public class DBUtils {

    private static String URL = "jdbc:mysql://localhost:3306/yiqing?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";
    private static String username = "root";
    private static String password = "123456";
    
    public static Connection getConnection() {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            return DriverManager.getConnection(URL, username, password);
        } catch (Exception e) {
            System.out.println("SQL CONNECTION FAILED!");
            e.printStackTrace();
        }
        return null;
    }
    
    public static String queryDataByDate(String date) {
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        JSONArray jsonArray = new JSONArray();
        
        String province = "";
        String sql = "select * from info where Date like ‘"+date+"%‘ and  City=‘‘";
        try {
            connection = getConnection();
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();
            while (resultSet.next()) {
                province += resultSet.getString("Province")+";";
            }
            resultSet.close();
            String string[] = province.split(";");
            for (int i = 0; i < string.length; i++) {
                if (string[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=‘"+string[i]+"‘";
                preparedStatement = connection.prepareStatement(sql);
                resultSet = preparedStatement.executeQuery();
                resultSet.next();
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("name", string[i]);
                jsonObject.put("num", resultSet.getInt(1));
                jsonObject.put("yisi", resultSet.getString(2));
                jsonObject.put("cure", resultSet.getString(3));
                jsonObject.put("dead", resultSet.getString(4));
                resultSet.close();
                sql = "select * from info where Date like ‘"+date+"%‘ and Province=‘"+string[i]+"‘";
                preparedStatement = connection.prepareStatement(sql);
                resultSet = preparedStatement.executeQuery();
                resultSet.next();
                jsonObject.put("code", resultSet.getString("Code"));
                resultSet.close();
                jsonArray.add(jsonObject);
            }
            return jsonArray.toString();
        } catch (SQLException e) {
            e.printStackTrace();
            return null;
        }
    }
}

package com.pjh.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 com.pjh.DBUtils.DBUtils;

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

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        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 {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(DBUtils.queryDataByDate(request.getParameter("date")));
    }

}

前台的代码

<!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.min.js"></script>
<script src="js/jquery.min.js"></script>
<style>
            #top {
                width: auto;
                height: 30px;
                text-align: center;
                margin: auto;
                padding-top: 5px;
                background-color: gray;
            }
        </style>
<title>YiQing</title>
</head>
<body>

    <div id="top">
            请选择日期：<input type="date" name="date"><button>查询</button>
    </div>
    
    <div id="main" style="width: 100%;height:550px;overflow: auto;"></div>
    <script type="text/javascript">
         var myChart = echarts.init(document.getElementById(‘main‘));
         myChart.showLoading();
         var names=[];
         var nums=[];
        $("button").click(function(){
            names=[];
            nums=[];
            $(".head").empty();
            $(".main").empty();
            $.post(
                ‘http://localhost:8086/yiqing/queryDataServlet‘,
                {"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:[‘确诊人数‘]
                            },
                            grid: {  
                                y2: 150  
                            },
                            xAxis: {
                                type : ‘category‘,
                                data: names,
                                axisLabel:{  
                                    interval:0,
                                    rotate:-17,
                                    }
                            },
                            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>

结果样例