这里引用了王正帅同学的图片 地址如下:https://www.cnblogs.com/20183544-wangzhengshuai/p/12409216.html
一、总体感受
首先,说一些我个人感受,这是本人第一次接触图表可视化插件的使用,
说实话,刚开始编代码还是很懵的,而且刚开始的编代码的时候,我有点
心浮气躁了,我直接在网上去找与题目直接相关的代码,明明自己对Echarts
包括语法、配置什么也不了解,就直接看别人代码,这也直接导致了我编代
码效率低下,而且错误极其的多,所以后来我决定将大问题分解,先学基本
语法,再结合一些网上的一些小demo,自己写了一些小demo,然后再去结
合实例和代码去写这三道题,我学到了分解问题是个很好的解决问题思路。
二、题目、源代码、运行测试
1 、第一阶段目标:
(1)导入全国疫情数据库payiqing.sql(MySQL数据库)
(2)可以按照时期查询各个省市的疫情统计表格。
(3)以折线图或柱状图展示某天的全国各省的确诊人数。
2、思路
这题可以通过前台输入一个时间参数,然后经过Servlet获取此参数并且调用Dao
中的方法获取一个list(里面数据是对应省份和确诊人数),然后将这个list传给前台,
前台通过<c:forEach items="" var="">获取数据并按照Echarts制作图表的语法完成
一个柱状图展示
3、源代码
DBUtil.java(连接数据库代码)
package DBUtil;
import java.sql.*;
/**
* 数据库连接工具
* @author Hu
*
*/
public class DBUtil {
public static String url = "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC";
public static String user = "root";
public static String password = "123";
public static Connection getConn () {
Connection conn = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//加载驱动
conn = DriverManager.getConnection(url, user, password);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
/**
* 关闭连接
* @param state
* @param conn
*/
public static void close (PreparedStatement preparedState, Connection conn) {
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
/**
* 关闭连接
* @param state
* @param 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();
}
}
}
public static void main(String[] args) throws SQLException {
Connection conn = getConn();
PreparedStatement preparedStatement = null;
ResultSet rs = null;
String sql ="select * from testr";
preparedStatement = conn.prepareStatement(sql);
rs = preparedStatement.executeQuery();
if(rs.next()){
System.out.println("数据库为空");
}
else{
System.out.println("数据库不为空");
}
}
}
Dao.java
package Dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import DBUtil.DBUtil;
import Javabean.Yi;
public class Dao {
public List<Yi> search(String Date) {
String sql = "select * from info where Date= '"+Date+"'";
List<Yi> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Yi bean = null;
int i=0;
while (rs.next()) {
if(i<32) {
String province = rs.getString("Province");
int confirmed_num = Integer.parseInt(rs.getString("Confirmed_num"));
System.out.println(province);
System.out.println(confirmed_num);
bean = new Yi(province,confirmed_num);
list.add(bean);
i++;
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
return list;
}
}
Yi.java
package Javabean;
public class Yi {
private int confirmed_num;
private String Date;
private String province;
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public String getDate() {
return Date;
}
public void setDate(String date) {
Date = date;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public Yi() {}
public Yi(String Date, String province,int confirmed_num) {
this.Date=Date;
this.province=province;
this.confirmed_num=confirmed_num;
}
public Yi( String Province,int Confirmed_num) {
this.province=Province;
this.confirmed_num=Confirmed_num;
}
}
Servlet
package tongServlet;
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.Dao;
import Javabean.Yi;
@WebServlet("/tongServlet")
public class tongServlet extends HttpServlet {
/**
* 特有id号
*/
private static final long serialVersionUID = 1L;
Dao dao = new Dao();
/**
* 方法选择
* @return
* @throws IOException
* @throws ServletException
*/
protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
String method = req.getParameter("method");
if("search".equals(method)) {
search(req,resp);
}
}
private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("utf-8");
String Date = req.getParameter("Date");
List<Yi> yis = dao.search(Date);
req.setAttribute("yis", yis);
req.getRequestDispatcher("liulan.jsp").forward(req, resp);
}
}
前台代码:
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日期查询人数</title>
<script src="http://t.zoukankan.com/js/jquery.min.js"></script>
<script src="http://t.zoukankan.com/js/jquery.code.js"></script>
<style>
.a{
margin-bottom: 20px;
}
.b{
margin-top:45px;
margin-bottom: 20px;
}
.c{
300px;
height:240px;
background:rgb(195,195,195);
position:absolute;
top:30%;
left:50%;
transform:translaet(-50%,-50%);
}
.d{
font-size:5px;
color:black;
font-family:"宋体";
}
.e{
240px;
height:30px;
margin-left:30px;
background-color:blue;
}
.f{
margin-left:30px;
margin-top:45px;
margin-bottom: 20px;
}
.g{
margin-left:30px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="c">
<form action="tongServlet?method=search" method="post" onsubmit="return check()">
<div class="f">
<label for="Date">日期:</label>
<input type="text" autofocus="autofocus" placeholder="请输入查询日期" name="Date">
</div>
<div>
<input type="submit" class="e" value=" 查 询 ">
</div>
</form>
</div>
</body>
</html>
liulan.jsp
<%@ 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>
<!-- 使用单文件引入的方式使用ECharts.JS -->
<script src="http://t.zoukankan.com/echarts.js"></script>
</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 style="color: black;">疫情分布列表</h1>
<table class="tb">
<tr>
<td>省份</td>
<td>确诊人数</td>
</tr>
<c:forEach items="${yis}" var="item">
<tr>
<td>${item.province}</td>
<td>${item.confirmed_num}</td>
</tr>
</c:forEach>
</table>
</div>
<div style=" 600px;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="${yis}" var="yi">
arr[index++] = ${yi.confirmed_num};
</c:forEach>
// 指定图表的配置项和数据
var option = {
title: {
text: '疫情分布图'
},
tooltip: {
show: true
},
legend: {
data:['各省确诊人数']
},
xAxis : [
{
type : 'category',
data : [
<c:forEach items="${yis}" var="y">
["${y.province}"],
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'Confirmed_num',
type:'bar',
data: arr
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
4、运行测试
5、第二阶段目标:疫情统计地图可视化:
可以通过地图的形式来直观显示疫情的大致分布情况,还可以查看具体省份的疫情统计情况。
在全国地图上使用不同的颜色代表大概确诊人数区间,颜色的深浅表示疫情的严重程度,可以直观了解高危区域;
鼠标移到每个省份会高亮显示、点击鼠标会显示该省具体疫情情况、点击某个省份显示该省疫情的具体情况
显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数;
6、遇到的问题
1、自定义,echart 的 tooltip(提示框)时 只能获取到 name (省的名称)的值和 value
(确诊人数)的值(决定颜色),而获取不到自定义的键值对! (注:name、value的名字是固定的不能改)!
2、chain.js 工具的地区名称和自己的数据的名称不对应
7、思路
首先还是和上面第一阶段思路一样,通过前台输入一个时间参数,
然后经过Servlet获取此参数并且调用Dao中的方法获取一个list(里
面数据是对应省份、感染患者人数、疑似患者人数、治愈人数、死
亡人数)然后将这个list传给前台,只不过这次不能只有一个数据类型,
要建立四个数据类型,每个数据类型名字都一样,值不同,前台通过
<c:forEach items="" var="">获取数据并按照Echarts制作地图的语法
完成一个地图展示,前台需要导入china,js和Echarts.min.js。
8、源代码
DBUtil.java(连接数据库代码)
package DBUtil;
import java.sql.*;
/**
* 数据库连接工具
* @author Hu
*
*/
public class DBUtil {
public static String url = "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC";
public static String user = "root";
public static String password = "123";
public static Connection getConn () {
Connection conn = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//加载驱动
conn = DriverManager.getConnection(url, user, password);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
/**
* 关闭连接
* @param state
* @param conn
*/
public static void close (PreparedStatement preparedState, Connection conn) {
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
/**
* 关闭连接
* @param state
* @param 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();
}
}
}
public static void main(String[] args) throws SQLException {
Connection conn = getConn();
PreparedStatement preparedStatement = null;
ResultSet rs = null;
String sql ="select * from testr";
preparedStatement = conn.prepareStatement(sql);
rs = preparedStatement.executeQuery();
if(rs.next()){
System.out.println("数据库为空");
}
else{
System.out.println("数据库不为空");
}
}
}
Dao.java
package Dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import DBUtil.DBUtil;
import Javabean.Yi;
import Javabean.Yio;
public class Dao {
public List<Yi> search(String Date) {
String sql = "select * from info1 where Date= '"+Date+"'";
List<Yi> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Yi bean = null;
while (rs.next()) {
String city = rs.getString("City");
if(city.length()!=0) {
}else {
String province = rs.getString("Province");
int confirmed_num = Integer.parseInt(rs.getString("Confirmed_num"));
int yisi_num =0;
int cured_num=Integer.parseInt(rs.getString("Cured_num"));
int dead_num=Integer.parseInt(rs.getString("Dead_num"));
System.out.println(province);
System.out.println(confirmed_num);
System.out.println(yisi_num);
System.out.println(cured_num);
System.out.println(dead_num);
bean = new Yi(province,confirmed_num,yisi_num,cured_num,dead_num);
list.add(bean);
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
return list;
}
public List<Yio> searchcity(String time, String province) {
String sql = "select * from info1 where Date= '"+time+"' and Province= '"+province+"'";
List<Yio> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Yio bean = null;
while (rs.next()) {
String city = rs.getString("City");
if(city.length()!=0) {
String city1 = city;
int confirmed_num =Integer.parseInt(rs.getString("Confirmed_num"));
int yisi_num =0;
int cured_num=Integer.parseInt(rs.getString("Cured_num"));
int dead_num=Integer.parseInt(rs.getString("Dead_num"));
System.out.println(city1);
System.out.println(confirmed_num);
System.out.println(yisi_num);
System.out.println(cured_num);
System.out.println(dead_num);
bean = new Yio(city1,confirmed_num,yisi_num,cured_num,dead_num);
list.add(bean);
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
return list;
}
}
Yi.java
package Javabean;
public class Yi {
private String date;
private String province;
private int confirmed_num;
private int yisi_num;
private int cured_num;
private int dead_num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public int getYisi_num() {
return yisi_num;
}
public void setYisi_num(int yisi_num) {
this.yisi_num = yisi_num;
}
public int getCured_num() {
return cured_num;
}
public void setCured_num(int cured_num) {
this.cured_num = cured_num;
}
public int getDead_num() {
return dead_num;
}
public void setDead_num(int dead_num) {
this.dead_num = dead_num;
}
public Yi() {}
public Yi(String province,int confirmed_num,int yisi_num, int cured_num,int dead_num) {
this.province=province;
this.confirmed_num=confirmed_num;
this.yisi_num=yisi_num;
this.cured_num=cured_num;
this.dead_num=dead_num;
}
}
Servlet
package tongServlet;
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.Dao;
import Javabean.Yi;
import Javabean.Yio;
@WebServlet("/tongServlet")
public class tongServlet extends HttpServlet {
/**
* 特有id号
*/
private static final long serialVersionUID = 1L;
Dao dao = new Dao();
/**
* 方法选择
* @return
* @throws IOException
* @throws ServletException
*/
protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
String method = req.getParameter("method");
if("search".equals(method)) {
search(req,resp);
}else if("city".equals(method)) {
city(req,resp);
}
}
private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("utf-8");
String Date = req.getParameter("Date");
List<Yi> yis = dao.search(Date);
req.setAttribute("Date",Date);
req.setAttribute("yis", yis);
req.getRequestDispatcher("ditu.jsp").forward(req, resp);
}
}
前台代码:
search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询</title>
<script src="http://t.zoukankan.com/js/jquery.min.js"></script>
<script src="http://t.zoukankan.com/js/jquery.code.js"></script>
<style>
.a{
margin-bottom: 20px;
}
.b{
margin-top:45px;
margin-bottom: 20px;
}
.c{
300px;
height:240px;
background:rgb(195,195,195);
position:absolute;
top:30%;
left:50%;
transform:translaet(-50%,-50%);
}
.d{
font-size:5px;
color:black;
font-family:"宋体";
}
.e{
240px;
height:30px;
margin-left:30px;
background-color:blue;
}
.f{
margin-left:30px;
margin-top:45px;
margin-bottom: 20px;
}
.g{
margin-left:30px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="c">
<form action="tongServlet?method=search" method="post" onsubmit="return check()">
<div class="f">
<label for="Date">日期:</label>
<input type="text" autofocus="autofocus" placeholder="请输入查询日期" name="Date">
</div>
<div>
<input type="submit" class="e" value=" 查 询 ">
</div>
</form>
</div>
</body>
</html>
ditu.jsp
<%@ 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>
<script src="http://t.zoukankan.com/jquery.min.js"></script>
<script src="http://t.zoukankan.com/echarts.js"></script>
<script src="http://t.zoukankan.com/china.js"></script>
<style>
*{margin:0;padding:0}
html,body{
100%;
height:100%;
}
#main{
600px;
height:450px;
margin: 150px auto;
border:1px solid #ddd;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div id="main">
</div>
<script type="text/javascript">
var dataList=[
<c:forEach items="${yis}" var="y">
{name:"${y.province}",value:"${y.confirmed_num}"},
</c:forEach>
]
var data2=[
<c:forEach items="${yis}" var="a">
{name:"${a.province}",value:"${a.dead_num}"},
</c:forEach>
]
var data3=[
<c:forEach items="${yis}" var="b">
{name:"${b.province}",value:"${b.cured_num}"},
</c:forEach>
]
var data4=[
<c:forEach items="${yis}" var="c">
{name:"${c.province}",value:"${c.yisi_num}"},
</c:forEach>
]
var myChart = echarts.init(document.getElementById('main'));
function randomValue() {
return Math.round(Math.random()*1000);
}
option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},
visualMap: {
min: 0,
max: 35000,
left: 'left',
top: 'bottom',
text: ['多','少'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show:true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '感染患者人数',
type: 'map',
geoIndex: 0,
data:dataList
},
{
name:'死亡人数',
type:'map',
data:data2
},
{
name:'治愈人数',
type:'map',
data:data3
},
{
name:'疑似患者人数',
type:'map',
data:data4
}
]
};
myChart.setOption(option);
myChart.on('click', function (params) {
var url = "tongServlet?method=city&province=" + params.name;
window.location.href = url;
});
/* setTimeout(function () {
myChart.setOption({
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
});
},1000)*/
</script>
</body>
</html>
9、运行测试
10、
第三阶段目标:鼠标移到每个市会高亮显示,并且显示简单的数据;
数据下钻:单击各个省可以下钻到各个地市的数据显示。
11、思路
在原有地图基础加上一个带有当前省份的一个跳转,跳转到Servlet,然后
Serlet调用Dao中的方法获取数据,然后将数据传到前台,前台调用对应
省份json数据包,按照省级地图配置和语法,进行各个城市的显示
12、源代码
DBUtil.java(连接数据库代码)
package DBUtil;
import java.sql.*;
/**
* 数据库连接工具
* @author Hu
*
*/
public class DBUtil {
public static String url = "jdbc:mysql://localhost:3306/testr?serverTimezone=UTC";
public static String user = "root";
public static String password = "123";
public static Connection getConn () {
Connection conn = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//加载驱动
conn = DriverManager.getConnection(url, user, password);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
/**
* 关闭连接
* @param state
* @param conn
*/
public static void close (PreparedStatement preparedState, Connection conn) {
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close (ResultSet rs, PreparedStatement preparedState, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (preparedState != null) {
try {
preparedState.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
/**
* 关闭连接
* @param state
* @param 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();
}
}
}
public static void main(String[] args) throws SQLException {
Connection conn = getConn();
PreparedStatement preparedStatement = null;
ResultSet rs = null;
String sql ="select * from testr";
preparedStatement = conn.prepareStatement(sql);
rs = preparedStatement.executeQuery();
if(rs.next()){
System.out.println("数据库为空");
}
else{
System.out.println("数据库不为空");
}
}
}
Dao.java
package Dao;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import DBUtil.DBUtil;
import Javabean.Yi;
import Javabean.Yio;
public class Dao {
public List<Yi> search(String Date) {
String sql = "select * from info1 where Date= '"+Date+"'";
List<Yi> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Yi bean = null;
while (rs.next()) {
String city = rs.getString("City");
if(city.length()!=0) {
}else {
String province = rs.getString("Province");
int confirmed_num = Integer.parseInt(rs.getString("Confirmed_num"));
int yisi_num =0;
int cured_num=Integer.parseInt(rs.getString("Cured_num"));
int dead_num=Integer.parseInt(rs.getString("Dead_num"));
System.out.println(province);
System.out.println(confirmed_num);
System.out.println(yisi_num);
System.out.println(cured_num);
System.out.println(dead_num);
bean = new Yi(province,confirmed_num,yisi_num,cured_num,dead_num);
list.add(bean);
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
return list;
}
public List<Yio> searchcity(String time, String province) {
String sql = "select * from info1 where Date= '"+time+"' and Province= '"+province+"'";
List<Yio> list = new ArrayList<>();
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
Yio bean = null;
while (rs.next()) {
String city = rs.getString("City");
if(city.length()!=0) {
String city1 = city;
int confirmed_num =Integer.parseInt(rs.getString("Confirmed_num"));
int yisi_num =0;
int cured_num=Integer.parseInt(rs.getString("Cured_num"));
int dead_num=Integer.parseInt(rs.getString("Dead_num"));
System.out.println(city1);
System.out.println(confirmed_num);
System.out.println(yisi_num);
System.out.println(cured_num);
System.out.println(dead_num);
bean = new Yio(city1,confirmed_num,yisi_num,cured_num,dead_num);
list.add(bean);
}
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(rs, state, conn);
}
return list;
}
}
Javabean:
Yi.java
package Javabean;
public class Yi {
private String date;
private String province;
private int confirmed_num;
private int yisi_num;
private int cured_num;
private int dead_num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public int getYisi_num() {
return yisi_num;
}
public void setYisi_num(int yisi_num) {
this.yisi_num = yisi_num;
}
public int getCured_num() {
return cured_num;
}
public void setCured_num(int cured_num) {
this.cured_num = cured_num;
}
public int getDead_num() {
return dead_num;
}
public void setDead_num(int dead_num) {
this.dead_num = dead_num;
}
public Yi() {}
public Yi(String province,int confirmed_num,int yisi_num, int cured_num,int dead_num) {
this.province=province;
this.confirmed_num=confirmed_num;
this.yisi_num=yisi_num;
this.cured_num=cured_num;
this.dead_num=dead_num;
}
}
Yio.java
package Javabean;
public class Yio {
private String date;
private String city;
private int confirmed_num;
private int yisi_num;
private int cured_num;
private int dead_num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public int getConfirmed_num() {
return confirmed_num;
}
public void setConfirmed_num(int confirmed_num) {
this.confirmed_num = confirmed_num;
}
public int getYisi_num() {
return yisi_num;
}
public void setYisi_num(int yisi_num) {
this.yisi_num = yisi_num;
}
public int getCured_num() {
return cured_num;
}
public void setCured_num(int cured_num) {
this.cured_num = cured_num;
}
public int getDead_num() {
return dead_num;
}
public void setDead_num(int dead_num) {
this.dead_num = dead_num;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public Yio() {}
public Yio(String city,int confirmed_num,int yisi_num, int cured_num,int dead_num) {
this.city=city;
this.confirmed_num=confirmed_num;
this.yisi_num=yisi_num;
this.cured_num=cured_num;
this.dead_num=dead_num;
}
}
Servlet
package tongServlet;
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.Dao;
import Javabean.Yi;
import Javabean.Yio;
@WebServlet("/tongServlet")
public class tongServlet extends HttpServlet {
/**
* 特有id号
*/
private static final long serialVersionUID = 1L;
Dao dao = new Dao();
/**
* 方法选择
* @return
* @throws IOException
* @throws ServletException
*/
protected void service(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
String method = req.getParameter("method");
if("search".equals(method)) {
search(req,resp);
}else if("city".equals(method)) {
city(req,resp);
}
}
private void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("utf-8");
String Date = req.getParameter("Date");
List<Yi> yis = dao.search(Date);
req.setAttribute("Date",Date);
req.setAttribute("yis", yis);
req.getRequestDispatcher("ditu.jsp").forward(req, resp);
}
private void city(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String province = req.getParameter("province");
String time = "2020-02-12 10:14:15";
List<Yio> yios = dao.searchcity(time,province);
req.setAttribute("province",province);
req.setAttribute("yios", yios);
req.getRequestDispatcher("test.jsp").forward(req, resp);
}
}
前台代码:
search.jsp
ditu.jsp
<%@ 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>
<script src="http://t.zoukankan.com/jquery.min.js"></script>
<script src="http://t.zoukankan.com/echarts.js"></script>
<script src="http://t.zoukankan.com/china.js"></script>
<style>
*{margin:0;padding:0}
html,body{
100%;
height:100%;
}
#main{
600px;
height:450px;
margin: 150px auto;
border:1px solid #ddd;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div id="main">
</div>
<script type="text/javascript">
var dataList=[
<c:forEach items="${yis}" var="y">
{name:"${y.province}",value:"${y.confirmed_num}"},
</c:forEach>
]
var data2=[
<c:forEach items="${yis}" var="a">
{name:"${a.province}",value:"${a.dead_num}"},
</c:forEach>
]
var data3=[
<c:forEach items="${yis}" var="b">
{name:"${b.province}",value:"${b.cured_num}"},
</c:forEach>
]
var data4=[
<c:forEach items="${yis}" var="c">
{name:"${c.province}",value:"${c.yisi_num}"},
</c:forEach>
]
var myChart = echarts.init(document.getElementById('main'));
function randomValue() {
return Math.round(Math.random()*1000);
}
option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 0; i < myseries.length; i++) {
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},
visualMap: {
min: 0,
max: 35000,
left: 'left',
top: 'bottom',
text: ['多','少'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show:true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '感染患者人数',
type: 'map',
geoIndex: 0,
data:dataList
},
{
name:'死亡人数',
type:'map',
data:data2
},
{
name:'治愈人数',
type:'map',
data:data3
},
{
name:'疑似患者人数',
type:'map',
data:data4
}
]
};
myChart.setOption(option);
myChart.on('click', function (params) {
var url = "tongServlet?method=city&province=" + params.name;
window.location.href = url;
});
/* setTimeout(function () {
myChart.setOption({
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
});
},1000)*/
</script>
</body>
</html>
ditu2.jsp
<%@ 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>
<script src="http://t.zoukankan.com/jquery.min.js"></script>
<script src="http://t.zoukankan.com/echarts.min.js"></script>
<style>
*{margin:0;padding:0}
html,body{
100%;
height:100%;
}
#main{
600px;
height:450px;
margin: 150px auto;
border:1px solid #ddd;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<%
Object message = request.getAttribute("message");
if(message!=null && !"".equals(message)){
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%} %>
<div id="main">
</div>
<script type="text/javascript">
var province = "${province}";
var myChart = echarts.init(document.getElementById('main'));
$.get("mapjson/"+ province +".json", function (geoJson) {
myChart.hideLoading();
echarts.registerMap(province, geoJson);
var dataList=[
<c:forEach items="${yios}" var="y">
{name:"${y.city}",value:"${y.confirmed_num}"},
</c:forEach>
]
function randomValue() {
return Math.round(Math.random()*1000);
}
option = {
title: {
text: province + '地区疫情情况',
},
tooltip: {
formatter: function(params) {
return +params.name+'感染患者人数:'+params.value
}
},
visualMap: {
min: 0,
max: 35000,
left: 'left',
top: 'bottom',
text: ['多','少'],//取值范围的文字
inRange: {
color: ['#e0ffff', '#006edd']//取值范围的颜色
},
show:true//图注
},
geo: {
map:'',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '感染患者人数',
type: 'map',
mapType: province, // 自定义扩展图表类型
geoIndex: 0,
data:dataList
}
]
}
};
myChart.setOption(option);
/* setTimeout(function () {
myChart.setOption({
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
});
},1000)*/
</script>
</body>
</html>
13、运行测试
图片可能比较模糊,我的省级地图运行效果,类似于王正帅同学的这种: