全国疫情地图之进入省份地图
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
浙公网安备 33010602011771号