全国疫情地图之进⼊省份地图
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.ElementById('main'));
<('click', function (params) {
var url = "${tPath }/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; le.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 = Conn();
Statement state = null;
ResultSet rs = null;
xinde grade = null;
String c=null;
Gson json=new Gson();
try {
state = ateStatement();
rs = uteQuery(sql);
while (rs.next()) // 这⾥表⽰，当rs.next()有值得时候，即收到查询结果
{String String("name");
String Confirmed_String("confirm");
String String("heal");
String String("dead");
grade=new xinde(shengfen,Confirmed_num,cured,dead);
list.add(grade); // 表⽰，把bean⾥的数据存⼊到list当中
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBUtil.close(state, conn);
}
Json(list);
System.out.println(c);
request.setAttribute("list", list);
/**
* @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" ></div>
<script>
var myChart = echarts.ElementById('main'));
myChart.showLoading();
var area = "${area}";
$.get("${tPath }/js/"+ area +".json", function (geoJson) {
myChart.hideLoading();
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: {}
}
},setoption
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 : "${tPath }/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;