03全国疫情统计可视化地图
通过使用百度Echarts图表完成对疫情数据的柱状图显示和各个省份地区人数表格显示。通过连接数据库取得数据，然后结合Echarts的使用方法以及网上的一些使用实例，完成统计显示功能。通过建立dao包写入方法，Servlet传递数据，最终显示出来。
代码：
Dao包：
package dao;
import java.util.List;
import entity.Hebei;
public interface UserDao {
public List<Hebei> getUserAll(String date0,String date1);//返回员工信息集合
}
package dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import entity.Hebei;
import util.DBconn;
public class UserDaoImpl implements UserDao {
@Override
public List<Hebei> getUserAll(String date0,String date1) {
// TODO Auto-generated method stub
List<Hebei> list = new ArrayList<Hebei>();
try {
DBconn.init();
String sql = "select * from info1 where date between '"+date0+"' and '"+date1+"'";
ResultSet rs = DBconn.selectSql(sql);
while(rs.next()) {
Hebei hebei = new Hebei();
hebei.setId(rs.getInt("id"));
hebei.setCity(rs.getString("city"));
hebei.setCode(rs.getString("code"));
hebei.setCured_num(rs.getString("cured_num"));
hebei.setDate(rs.getString("date"));
hebei.setDead_num(rs.getString("dead_num"));
hebei.setYisi_num(rs.getString("yisi_num"));
hebei.setProvince(rs.getString("province"));
hebei.setConfirmed_num(rs.getString("confirmed_num"));
list.add(hebei);
}
DBconn.closeConn();
return list;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
Entity包：
package entity;
public class Hebei {
private int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public String getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(String confirmed_num) {
this.confirmed_num = confirmed_num;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public String getYisi_num() {
return yisi_num;
}
public void setYisi_num(String yisi_num) {
this.yisi_num = yisi_num;
}
public String getCured_num() {
return cured_num;
}
public void setCured_num(String cured_num) {
this.cured_num = cured_num;
}
public String getDead_num() {
return dead_num;
}
public void setDead_num(String dead_num) {
this.dead_num = dead_num;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
private String province;
private String confirmed_num;
private String date;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
private String city;
private String yisi_num;
private String cured_num;
private String dead_num;
private String code;
}
Servlet包：
package servlet;
import java.io.IOException;
import java.util.List;
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.UserDao;
import dao.UserDaoImpl;
import entity.Hebei;
/**
* Servlet implementation class Searchall
*/
@WebServlet("/Searchall")
public class Searchall extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Searchall() {
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
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String time0 = request.getParameter("time0");
String time1 = request.getParameter("time1");
UserDao ud = new UserDaoImpl();
List<Hebei> userall = ud.getUserAll(time0,time1);
// HttpSession session = request.getSession();
request.setAttribute("userall", userall);
request.getRequestDispatcher("showall.jsp").forward(request, response);
}
}
Util包：
package util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBconn {
static String url = "jdbc:mysql://localhost:3306/payiqing?useUnicode=true&characterEncoding=utf-8";
static String user = "root";
static String password = "root";
static Connection conn = null;
static ResultSet rs = null;
static PreparedStatement ps = null;
public static void init() {
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url, user, password);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("init [SQL驱动程序初始化失败！]");
e.printStackTrace();
}
}
public static int addUpdDel(String sql) {
int i = 0;
try {
PreparedStatement ps = conn.prepareStatement(sql);
i = ps.executeUpdate();
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("sql数据库增删改异常");
e.printStackTrace();
}
return i;
}
public static ResultSet selectSql(String sql) {
try {
ps = conn.prepareStatement(sql);
rs = ps.executeQuery(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("sql数据库查询异常");
e.printStackTrace();
}
return rs;
}
public static void closeConn() {
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
System.out.println("sql数据库关闭异常");
e.printStackTrace();
}
}
}
Jsp：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form action="Searchall" method="get">
查询日期：<input name="time0" type="text" />至
<input name="time1" type="text" />
<input type="submit">
</form>
</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" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<meta charset="utf-8">
<base href="<%=basePath%>">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<style type="text/css">
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 800px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;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="${userall}" var="s">
arr[index++] = ${s.confirmed_num};
</c:forEach>
// 指定图表的配置项和数据
var option = {
title: {
text: '疫情感染人数图'
},
tooltip: {
show: true
},
legend: {
data:['感染人数']
},
xAxis : [
{
type : 'category',
data : [
<c:forEach items="${userall}" var="u">
["${u.province}"],
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'感染人数',
type:'bar',
data: arr
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<table width="90%" class="table">
<tr>
<th>ID</th>
<th>日期</th>
<th>省份</th>
<th>城市</th>
<th>确诊人数</th>
<th>疑似病例</th>
<th>治愈人数</th>
<th>死亡人数</th>
<th>省份编号</th>
</tr>
<c:forEach var="U" items="${userall}">
<tr>
<td>${U.id}</td>
<td>${U.date}</td>
<td>${U.province}</td>
<td>${U.city}</td>
<td>${U.confirmed_num}</td>
<td>${U.yisi_num}</td>
<td>${U.cured_num}</td>
<td>${U.dead_num}</td>
<td>${U.code}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
结果截图展示：
