1 第一阶段目标：
可以按照时期查询各个省市的疫情统计表格。
以折线图或柱状图展示某天的全国各省的
2第二阶段目标：疫情统计地图可视化：可以通过地图的形式来直观显示疫情的大致分布情况，还可以查看具体省份的疫情统计情况。
在全国地图上使用不同的颜色代表大概确诊人数区间，颜色的深浅表示疫情的严重程度，可以直观了解高危区域；
鼠标移到每个省份会高亮显示、点击鼠标会显示该省具体疫情情况、点击某个省份显示该省疫情的具体情况
显示该省份对应的感染患者人数、疑似患者人数、治愈人数、死亡人数；确诊人数。
3 第三阶段目标：鼠标移到每个市会高亮显示，并且显示简单的数据；
数据下钻：单击各个省可以下钻到各个地市的数据显示。
这个博客是总结全部疫情展示的总结主要运用mysql+和echarts.js和js工具来展示，
首先展示全国地图当点到省份时显示出死亡人数，治愈人数，疑似人数。
当点击省份时进入身份在现实各个城市的人数
首先展示全国疫情的地图展示代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<script src="js/echarts.min(1).js"></script>
<script src="js/china.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#main{
width:600px;
height:450px;
margin: 150px auto;
border:1px solid #ddd;
}
/*默认长宽比0.75*/
</style>
</head>
<body>
<div id="main">
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(\'main\'));
mychart.on(\'click\', function (params) {
var url = "${pageContext.request.contextPath }/aaha?area=" + params.name;
window.location.href = url;
});
myChart.setOption({
tooltip: {
formatter:function(params){
return params.name+\'<br />\'+\'确诊人数：\'+params[\'data\'][\'value\']+\'<br />\'+\'死亡人数：\'
+params[\'data\'][\'dead\']+\'<br />\'+\'治愈人数：\'+params[\'data\'][\'cured\'];
}//数据格式化
},
visualMap: {
min: 0,
max: 30000,
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,
nameMap : {
\'南海诸岛\' : \'南海诸岛\',
\'北京\' : \'北京市\',
\'天津\' : \'天津市\',
\'上海\' : \'上海市\',
\'重庆\' : \'重庆市\',
\'河北\' : \'河北省\',
\'河南\' : \'河南省\',
\'云南\' : \'云南省\',
\'辽宁\' : \'辽宁省\',
\'黑龙江\' : \'黑龙江省\',
\'湖南\' : \'湖南省\',
\'安徽\' : \'安徽省\',
\'山东\' : \'山东省\',
\'新疆\' : \'新疆维吾尔自治区\',
\'江苏\' : \'江苏省\',
\'浙江\' : \'浙江省\',
\'江西\' : \'江西省\',
\'湖北\' : \'湖北省\',
\'广西\' : \'广西壮族自治区\',
\'甘肃\' : \'甘肃省\',
\'山西\' : \'山西省\',
\'内蒙古\' : "内蒙古自治区",
\'陕西\' : \'陕西省\',
\'吉林\' : \'吉林省\',
\'福建\' : \'福建省\',
\'贵州\' : \'贵州省\',
\'广东\' : \'广东省\',
\'青海\' : \'青海省\',
\'西藏\' : \'西藏自治区\',
\'四川\' : \'四川省\',
\'宁夏\' : \'宁夏回族自治区\',
\'海南\' : \'海南省\',
\'台湾\' : \'台湾\',
\'香港\' : \'香港\',
\'澳门\' : \'澳门\'
},
}
]
});
$.post(
"qiunile3",
{},
function(result)
{
var datalist=jQuery.parseJSON(result);
if(datalist)
{
alert(1);
myChart.setOption({ //加载数据图表
series: [{
data: datalist
}]
});}
},
"json"
);
/* setTimeout(function () {
myChart.setOption({
series : [
{
name: \'信息量\',
type: \'map\',
geoIndex: 0,
data:dataList
}
]
});
},1000)*/
</script>
</body>
</html>
全国疫情后台servlet代码
import java.io.IOException;
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 javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import keshihua.province;
import keshihua.xinde;
/**
* Servlet implementation class qiunile3
*/
@WebServlet("/qiunile3")
public class qiunile3 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public qiunile3() {
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");
response.setContentType("text/html;charest=UTF-8");
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String sql="select * from yiqing ";
List<xinde> list = new ArrayList<>();
// 给集合list创造（new）一个存储空间用于存放数据
System.out.println(sql);
Connection conn = DBUtil.getConn();
Statement state = null;
ResultSet rs = null;
xinde grade = null;
String c=null;
Gson json=new Gson();
try {
state = conn.createStatement();
rs = state.executeQuery(sql);
while (rs.next()) // 这里表示，当rs.next()有值得时候，即收到查询结果
{String shengfen=rs.getString("name");
String Confirmed_num=rs.getString("confirm");
String cured=rs.getString("heal");
String dead=rs.getString("dead");
grade=new xinde(shengfen,Confirmed_num,cured,dead);
list.add(grade); // 表示，把bean里的数据存入到list当中
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(state, conn);
}
c=json.toJson(list);
System.out.println(c);
request.setAttribute("list", list);
response.getWriter().write(c); }
/**
* @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);
}
}
进入省份后疫情代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>某地区</title>
<script src="js/echarts.min(1).js"></script>
<script src="js/china.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script>
var myChart = echarts.init(document.getElementById(\'main\'));
myChart.showLoading();
var area = "${area}";
$.get("${pageContext.request.contextPath }/js/"+ area +".json", function (geoJson) {
myChart.hideLoading();
echarts.registerMap(area, geoJson);
myChart.setOption(option = {
title: {
text: area + \'地区疫情情况\',
subtext: \'该数据仅供参考\',
},
tooltip: {
trigger: \'item\',
formatter: \'{b}<br/>{c} (p / km2)\'
},
toolbox: {
show: true,
orient: \'vertical\',
left: \'right\',
top: \'center\',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 800,
max: 50000,
text: [\'High\', \'Low\'],
inRange: {
color: [\'lightskyblue\', \'yellow\', \'orangered\']
}
},
series: [
{
name: \'香港18区人口密度\',
type: \'map\',
mapType: area, // 自定义扩展图表类型
label: {
show: true
}
}
]
});
});
//异步加载数据
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "${pageContext.request.contextPath }/zilei",
data:{"area":area},
//请求发送到TestServlet处
success : function(resultJson) {
var result= jQuery.parseJSON(resultJson);
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
mychart.setOption({ //加载数据图表
series: [{
data: result
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
</script>
</body>
</html>
后台展示
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class aaha
*/
@WebServlet("/aaha")
public class aaha extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public aaha() {
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
System.out.println("???");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String area = request.getParameter("area");
request.setAttribute("area", area);
System.out.println("跳zhuan");
request.getRequestDispatcher("zxc.jsp").forward(request, response);
System.out.println("懵逼");
}
/**
* @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);
}
}
如果需要查抄echarts链接
链接：https://pan.baidu.com/s/1MJQI9UjLKZ2AZPHw-S77OA
提取码：yis3