源程序代码：
获取数据库数据
package dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import util.DButil;
public class Function {
public static String query(String a,String b) throws SQLException{
JSONArray jsonArray=new JSONArray();
String sql = "select province,sum(confirmed_num) as total from info where date_format(Date,'%Y-%m-%d') between '"+a+"' and '"+b+"'"
+ "group by province order by total desc";
Connection conn = DButil.getConn();
conn.setAutoCommit(false);
PreparedStatement preparedStatement = conn.prepareStatement(sql);
ResultSet resultSet = preparedStatement.executeQuery();
while (resultSet.next()) {
JSONObject json=new JSONObject();
String province=resultSet.getString("province");
if(province==null||province.equals("")) {
province="等待调查";
}
int total=resultSet.getInt("total");
json.put("province", province);
json.put("count", total+"");
jsonArray.add(json);
}
conn.commit();
conn.close();
return jsonArray.toString();
}
public static String getData(String a,String b) throws SQLException{
JSONArray jsonArray=new JSONArray();
String sql="select * from info where date_format(Date,'%Y-%m-%d') between '"+a+"' and '"+b+"' ";
Connection conn=DButil.getConn();
try {
Statement st=conn.createStatement();
ResultSet rs=st.executeQuery(sql);
while(rs.next()) {
JSONObject json=new JSONObject();
json.put("id",rs.getInt("id"));
json.put("date", rs.getTimestamp("Date").toString());
String province=rs.getString("province");
if(province==null||province.equals("")) {
province="等待调查";
}
json.put("province", province);
String city=rs.getString("city");
if(city==null||city.equals("")) {
city="无法得知";
}
json.put("city", city);
json.put("confirmed_num", rs.getInt("Confirmed_num"));
json.put("Cured_num", rs.getString("Cured_num"));
json.put("Dead_num",rs.getString("Dead_num"));
jsonArray.add(json);
}
}
catch(Exception e) {
System.out.println(e.getMessage());
}
finally {
if(conn!=null) {
conn.close();
}
}
return jsonArray.toString();
}
}
传递数据给前端
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
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.Function;
@WebServlet("/GetdataServlet")
public class GetdataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("utf-8");
response.setCharacterEncoding("utf-8");
String time1=request.getParameter("time1");
String time2=request.getParameter("time2");
System.out.println(time1+"--->"+time2);
String json=null;
try {
json=Function.getData(time1, time2);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(json);
PrintWriter out=response.getWriter();
out.println(json);
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("utf-8");
response.setCharacterEncoding("utf-8");
String time1=request.getParameter("time1");
String time2=request.getParameter("time2");
System.out.println(time1+"--->"+time2);
String json=null;
try {
json=Function.query(time1, time2);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(json);
PrintWriter out=response.getWriter();
out.println(json);
out.close();
}
}
前端可视化展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全国疫情统计</title>
<style type="text/css">
#btn {
/* 按钮美化 */
margin-top: 5px;
75px; /* 宽度 */
height: 23px; /* 高度 */
border- 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 14px; /* 字体大小 */
}
#btn:hover {
background: orange;
}
table td,th{
padding: 20px;
text-align: center;
border:1px solid #70aefb ;
vertical-align:middle;
}
#table{
margin-left:100px;
}
</style>
<script src="echarts.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.post("GetdataServlet",{time1:$("#time1").val(),time2:$("#time2").val()},function(result){
if(result!=null){
var array=JSON.parse(result);
console.log(result);
console.log(array);
var province=[];
var count=[];
for(var i=0;i<array.length;i++){
province.push(array[i].province);
count.push(array[i].count);
}
var myChart = echarts.init(document.getElementById('main'));
myChart.hideLoading();
myChart.setOption({
title: {
text: '疫情统计'
},
legend: {
data:['确诊人数']
},
xAxis: {
data: province,
axisLabel: {interval:0,rotate:40 }
},
yAxis: {
},
series: [{
// 根据名字对应到相应的系列
name: '确诊人数',
data:count
}]
});
$.get("GetdataServlet?time1="+$("#time1").val()+"&time2="+$("#time2").val(),function(result){
if(result!=null){
var html="<table><tr><td>编号</td><td>日期</td><td>省份</td><td>城市</td><td>确诊人数</td><td>治愈人数</td><td>死亡人数</td></tr>";
var json=JSON.parse(result);
for(var j=0;j<json.length;j++){
html+="<tr><td>"+json[j].id+"</td><td>"+json[j].date+"</td><td>"+json[j].province+"</td><td>"+json[j].city+"</td><td>"+json[j].confirmed_num+"</td><td>"+json[j].Cured_num+"</td><td>"+json[j].Dead_num+"</td></tr>"
}
console.log(json);
$("#table").html(html+"</table>");
}else{
}
});
}else{
alert("暂无该数据统计情况");
}
});
});
});
</script>
</head>
<body>
<span>时间段：</span>
<input type="text" id="time1" name="time1" />
<span>--------></span>
<input type="text" id="time2" name="time2" />
<input type="button" value="查询" id="btn">
<div id="main" style=" 1200px; height: 500px;"></div>
<div id="table"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title : {
text : '疫情统计柱形图'
},
tooltip : {},
legend : {
data : [ '确诊人数' ]
},
xAxis : {
data : []
},
yAxis : {},
series : [ {
name : '确诊人数',
type : 'bar',
data : []
} ]
});
</script>
</body>
</html>
运行截图：
第二和第三阶段进行整合
源程序代码：
获取数据库数据：
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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import bean.People;
import util.DButil;
public class Function {
public static String query(String start,String end) throws SQLException{
JSONArray jsonArray=new JSONArray();
String sql = "select province,sum(confirmed_num) as total from info where date_format(Date,'%Y-%m-%d') between '"+start+"' and '"+end+"'"
+ "group by province order by total desc";
Connection conn = DButil.getConn();
conn.setAutoCommit(false);
PreparedStatement preparedStatement = conn.prepareStatement(sql);
//执行查询语句并返回结果集
ResultSet resultSet = preparedStatement.executeQuery();
while (resultSet.next()) {
//注意：这里要与数据库里的字段对应
JSONObject json=new JSONObject();
String province=resultSet.getString("province");
if(province==null||province.equals("")) {
province="地址不明";
}
int total=resultSet.getInt("total");
json.put("name", province);
json.put("value", total);
jsonArray.add(json);
System.out.println(province);
}
conn.commit();
conn.close();
return jsonArray.toString();
}
public static String getPeople(String start,String end) throws SQLException{
List<People> list=new ArrayList<People>();
String sql="select * from info where date_format(Date,'%Y-%m-%d') between '"+start+"' and '"+end+"' ";
Connection conn=DButil.getConn();
try {
//连接对象coon调用createStatement()方法，创建一个执行SQL语句的对象st
Statement st=conn.createStatement();
//执行SQL语句中的对象st调用executeQuery()方法，执行查询语句，将查询到的结果返回到一个结果集中
ResultSet rs=st.executeQuery(sql);
//遍历结果集对象
while(rs.next()) {
People pl=new People();
pl.setId(rs.getInt("id"));
pl.setData(rs.getTimestamp("Date").toString());
pl.setConfirmed_num(rs.getInt("Confirmed_num"));
pl.setCured_num(rs.getString("Cured_num"));
pl.setDead_num(rs.getString("Dead_num"));
String province=rs.getString("province");
if(province==null||province.equals("")) {
province="地址不明";
}
pl.setProvince(province);
String city=rs.getString("city");
if(city==null||city.equals("")) {
city="尚不清楚";
}
pl.setCity(city);
list.add(pl);
}
}
catch(Exception e) {
System.out.println(e.getMessage());
}
finally {
if(conn!=null) {
conn.close();
}
}
String json=JSON.toJSONString(list);
return json;
}
}
将数据传递给前端
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
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.Function;
/**
* Servlet implementation class QueryServlet
*/
@WebServlet("/QueryServlet")
public class QueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //服务器接受前台数据转换为中文
response.setContentType("utf-8"); // 指定服务器给浏览器发送的代码
response.setCharacterEncoding("utf-8"); //get,post返回数据给前台
String start=request.getParameter("start");
String end=request.getParameter("end");
System.out.println(start+"--->"+end);
String json=null;
try {
json=Function.getPeople(start, end);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(json);
PrintWriter out=response.getWriter();
out.println(json);
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //服务器接受前台数据转换为中文
response.setContentType("utf-8"); // 指定服务器给浏览器发送的代码
response.setCharacterEncoding("utf-8"); //get,post返回数据给前台
String start=request.getParameter("start");
String end=request.getParameter("end");
System.out.println(start+"--->"+end);
String json=null;
try {
json=Function.query(start, end);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(json);
PrintWriter out=response.getWriter();
out.println(json);
out.close();
}
}
前端展示可视化界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国地图展示</title>
<style type="text/css">
#btn {
/* 按钮美化 */
margin-top: 5px;
75px; /* 宽度 */
height: 23px; /* 高度 */
border- 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 14px; /* 字体大小 */
}
#btn:hover {
background: orange;
}
</style>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.post("QueryServlet",{start:$("#start").val(),end:$("#end").val()},function(result){
if(result!=null){
var splitList=[
{start: 10000, end:200000},{start: 5000, end: 10000},
{start: 3000, end: 5000},{start: 1000, end: 3000},
{start: 500, end: 1000},{start: 0, end: 500}
];
var array=JSON.parse(result);
var mydata=[];
for(var i=0;i<array.length;i++){
var temp={};
if(array[i].name=="内蒙古自治区"||array[i].name=="黑龙江省"){
temp.name=array[i].name[0]+array[i].name[1]+array[i].name[2];
}else{
temp.name=array[i].name[0]+array[i].name[1];
}
temp.value=array[i].value;
mydata[i]=temp;
}
console.log(mydata);
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '疫情全国分布图',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: 'left',
y: 'center',
splitList: splitList,
color: ['#59EA3A','#FFFA40','#E238A7','#8DB42D','#3DA028','#BFBC30']
},
//配置属性
series: [{
name: '确诊人数',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data:mydata //数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);
var temp2=[];
$.get("QueryServlet?start="+$("#start").val()+"&end="+$("#end").val(),function(result){
if(result!=null){
var json=JSON.parse(result);
for(var j=0;j<json.length;j++){
temp2.push({name:json[j].city,value:json[j].confirmed_num});
}
}else{
}
});
myChart.on('click', function (params) {
console.log("我被点击了"+params.name);
goProvince(myChart,params,splitList,mydata1,optionMap);
});
console.log(temp2);
var mydata1 = temp2;
//渲染城市地图
function goProvince(myChart,params,splitList,mydata1,optionMap){
$.getJSON('js/mapjson/' +params.name + '.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap(params.name, geoJson);
var option = {
backgroundColor: '#FFFFFF',
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
left: 'left',
top: 'top',
splitList:splitList,
color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
show:true
},
//配置属性
series: [{
name: '确诊人数',
type: 'map',
mapType: params.name, // 地图类型，支持world，china及全国34个省市自治区，例如：河北、北京
roam: false, // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data:mydata1 //数据
}]
};
//使用制定的配置项和数据显示图表
myChart.setOption(option);
//点击城市返回全国地图
myChart.on('click', function (params) {
myChart.setOption(optionMap);
});
});
}
}else{
alert("暂无该数据统计情况");
}
});
});
});
</script>
</head>
<body>
<span>请输入查询的时间段：</span>
<input type="text" id="start" name="start"
placeholder="（格式：yyyy-MM-dd）" />
<span>--------></span>
<input type="text" id="end" name="end" placeholder="（格式：yyyy-MM-dd）" />
<input type="button" value="查询" id="btn">
<div id="main" style=" 1200px; height: 500px;"></div>
<div id="china_div" class="col-md-12" style="height:600px;"></div>
<!-- 渲染容器一定要设置宽高 -->
</body>
</html>