全国疫情可视化地图（一）

第一阶段目标：

导入全国疫情数据库payiqing.sql（MySQL数据库）。
可以按照时期查询各个省市的疫情统计表格。
以折线图或柱状图展示某天的全国各省的疫情统计情况。

实现过程：

源代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1">
<title>全国疫情统计可视化地图</title>
<link rel="stylesheet" href="layui/layui.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">全国疫情统计可视化地图</div>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" >
                    <li class="layui-nav-item"><a href="listall.jsp" target="frame">疫情查询</a></li>
                    <li class="layui-nav-item"><a href="Chart"     target="frame">全国疫情柱状图统计</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <iframe name="frame" width="100%" height="100%"
                style="border: 1px solid #CCC;"></iframe>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            全国疫情统计可视化地图
        </div>
    </div>

    <script src="layui/layui.all.js"></script>
    <script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element; 
});
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="chart/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var arr = new Array();
    var index = 0;
    <c:forEach items="${pres}" var="goods">
        arr[index++] = ${goods.confirmed};
    </c:forEach>

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '全国疫情统计'
        },
        tooltip: {
            show: true
        },
        legend: {
            data:['患者数']
        },
        xAxis : [
            {
                type : 'category',
                data : [
                    <c:forEach items="${pres}" var="g">
                    ["${g.name}"],
                    </c:forEach>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'患者数',
                type:'bar',
                data: arr
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浏览需求</title>
</head>
<body>
<%
        Object message = request.getAttribute("message");
        if (message != null && !"".equals(message)) {
    %>
    <script type="text/javascript">
               alert("<%=request.getAttribute("message")%>");
    </script>
    <%
        }
    %>
    <div align="center">
        <h1>各省市疫情统计表</h1>
        <br>
        日期范围<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime">
        <button type="button" class="btn btn-info" onclick="checkfind()">查询</button>    
        <br><br>
        <table>
          <thead>
            <tr>
                <th>编号</th>
              <th>日期</th>
              <th>省名</th>
              <th>市名</th>
              <th>确诊人数</th>
              <th>治愈人数</th>
              <th>死亡人数</th>
            </tr>
          </thead>
          <tbody>
          <c:forEach items="${pres}" var="item">
            <tr class="active">
            <td>${item.id}</td>
              <td>${item.date}</td>
              <td>${item.name}</td>
              <td>${item.city}</td>
              <td>${item.confirmed}</td>
              <td>${item.cured}</td>
              <td>${item.dead}</td>
           </tr>
          </c:forEach>
          </tbody>
        </table>
    </div>
<script type="text/javascript">

function checkfind()
{
    var btime=document.getElementById("btime").value;
    var etime=document.getElementById("etime").value;
    if(btime==""||etime==""||(btime==""&&etime==""))
    {
        alert("请填写时间");
        return ;
    }
    else
    {
        window.location.href = "checkfind?btime="+btime+"&etime="+etime;
    }
}

</script>
</body>
</html>

2、后台部分

Pre.java

package entity;

public class Pre {
    private int id;
    private String name;
    private String city;
    private String confirmed;
    private String cured;
    private String dead;
    private String date;
    
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getConfirmed() {
        return confirmed;
    }
    public void setConfirmed(String confirmed) {
        this.confirmed = confirmed;
    }
    public String getCured() {
        return cured;
    }
    public void setCured(String cured) {
        this.cured = cured;
    }
    public String getDead() {
        return dead;
    }
    public void setDead(String dead) {
        this.dead = dead;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    
    public Pre() {
        super();
    }
    public Pre(int id, String name, String city, String confirmed, String cured, String dead, String date) {
        super();
        this.id = id;
        this.name = name;
        this.city = city;
        this.confirmed = confirmed;
        this.cured = cured;
        this.dead = dead;
        this.date = date;
    }
    public Pre(String name,String confirmed) {
        super();
        this.name = name;
        this.confirmed = confirmed;

    }
    
}

predao.java

package dao;

import java.sql.*;
import java.util.ArrayList;

import entity.Pre;
import util.DBUtil;

public class predao {
    public ArrayList<Pre> getquanguo()
    {
        ArrayList<Pre> list=new ArrayList<>();
        String sql="select * from info";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        Pre bean=null;
        int flag=0;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                String name=rs.getString("Province");
                String confirmed=rs.getString("Confirmed_num");
                bean=new Pre(name,confirmed);
                list.add(bean);
                if(name.equals("西藏自治区")){
                    flag=1;
                }
                if(flag==1)
                    break;
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return list;
    }
    public ArrayList<Pre> findtime(String btime,String etime)
    {
        String begin="";
        String []s=btime.split("-");
        for(int i=0;i<s.length;i++)
            begin+=s[i].toString();
        
        String end="";
        String []e=etime.split("-");
        for(int i=0;i<e.length;i++)
            end+=e[i].toString();
        System.out.println(begin+" "+end);
        int bg=Integer.valueOf(begin);
        int ed=Integer.valueOf(end);
        //System.out.println(bg+" "+end);
        ArrayList<Pre> list=new ArrayList<>();
        String sql="select * from info";
        Connection con=null;
        Statement state=null;
        ResultSet rs=null;
        con=DBUtil.getConn();
        Pre bean=null;
        try {
            state=con.createStatement();
            rs=state.executeQuery(sql);
            while(rs.next())
            {
                int id=rs.getInt("id");
                String name=rs.getString("Province");
                String city=rs.getString("city");
                String confirmed=rs.getString("Confirmed_num");
                String cured=rs.getString("Cured_num");
                String dead=rs.getString("Dead_num");
                String date=rs.getString("Date");
                String ans="";
                String date2=date.substring(0, 10);
                String []d=date2.split("-");
                for(int i=0;i<d.length;i++)
                {
                    ans+=d[i].toString();
                }
                int k=Integer.valueOf(ans);
                System.out.println(k);
                if(k>=bg&&k<=ed) {
                    bean=new Pre(id,name,city,confirmed,cured,dead,date);
                    list.add(bean);
                }
            }
        } catch (SQLException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        DBUtil.close(rs, state, con);
        return list;
    }
}

Chart.java

package servlet;

import java.io.IOException;
import java.util.ArrayList;

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 dao.predao;
import entity.Pre;

/**
 * Servlet implementation class Chart
 */
@WebServlet("/Chart")
public class Chart extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Chart() {
        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
        request.setCharacterEncoding("utf-8");
        predao dao=new predao();
        ArrayList<Pre> list=dao.getquanguo();
        request.setAttribute("pres", list);
        request.getRequestDispatcher("chart.jsp").forward(request, response);
    }

    /**
     * @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);
    }

}

checkfind.java

package servlet;

import java.io.IOException;
import java.util.ArrayList;

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 dao.predao;
import entity.Pre;

/**
 * Servlet implementation class checkfind
 */
@WebServlet("/checkfind")
public class checkfind extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public checkfind() {
        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
        request.setCharacterEncoding("utf-8");
        String btime=request.getParameter("btime");
        String etime=request.getParameter("etime");
        predao dao=new predao();
        ArrayList<Pre> list=dao.findtime(btime,etime);
        if(list!=null)
        {
            request.setAttribute("pres", list);
            request.getRequestDispatcher("listall.jsp").forward(request, response);
        }
        else
        {
            request.setAttribute("message", "当前时间段无病例");
            request.getRequestDispatcher("listall.jsp").forward(request, response);
        }
    }

    /**
     * @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);
    }

}

DBUtil.java

package util;

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

public class DBUtil {
    
    private static final String db_url="jdbc:mysql://localhost:3306/mmm?useUnicode=true&characterEncoding=GB18030&useSSL=false&serverTimezone=GMT&allowPublicKeyRetrieval=true";
    public static String db_user = "root";
    public static String db_pass = "123456";
    
    public static Connection getConn () {
        Connection conn = null;
        
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(db_url, db_user, db_pass);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return conn;
    }
    
    
    public static void close (Statement state, Connection conn) {
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    
    public static void close (ResultSet rs, Statement state, Connection conn) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (state != null) {
            try {
                state.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

效果展示：

相关阅读:
【Educational Codeforces Round 101 (Rated for Div. 2) C】Building a Fence
【Codeforces Round #698 (Div. 2) C】Nezzar and Symmetric Array
【Codeforces Round #696 (Div. 2) D】Cleaning
【Codeforces Round #696 (Div. 2) C】Array Destruction
【Educational Codeforces Round 102 D】Program
【Educational Codeforces Round 102 C】No More Inversions
【Good Bye 2020 G】Song of the Sirens
【Good Bye 2020 F】Euclid's nightmare
使用mobx入门
 requestAnimationFrame 控制速度模拟setinterval
原文地址：https://www.cnblogs.com/charles-s/p/13087510.html

全国疫情可视化地图 （一）

全国疫情可视化地图（一）