全国疫情可视化地图 （一）
第一阶段目标：
- 导入全国疫情数据库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();
}
}
}
}
效果展示：
