项目源代码及数据:下载
1、项目要求
通过时间查询中国疫情数据以及疫情地图
2、开发工具
Eclipse+MySQL
3、项目结构
4、具体实现
4.1 导入相关jar包
4.2 前端代码
china.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js" ></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js?_v_=1598903772045"></script>
</head>
<style>
.btnbag{
width:100%;
text-align:center;
}
.btn{
width:150px;
height:40px;
border:0px;
border-radius:5px;
background-color:orange;
color:black;
margin-left:auto;
margin-top:10px
}
#lines{
/*background-color:#5c5c5c;*/
border: solid 1px;
height:600px;
}
#line{
/*background-color:#5c5c5c;*/
border: solid 1px;
width:55%;
height:600px;
float: left;
}
#line2{
/*background-color:#5c5c5c;*/
border: solid 1px;
width:45%;
height:600px;
float: left;
}
</style>
<body>
<div id="title">
<h2 >中国疫情可视化展示</h2>
</div>
<div><input type="text" class="form-control" id="time" placeholder="格式 2020-09-30 18:31:20"></div>
<div class="btnbag">
<input type="button" class="btn" value="查询" onclick="findbytime()">
</div>
<div id="lines">
<div id="line"></div>
<div id="line2"></div>
</div>
<div id="getbydate"></div>
</body>
<script>
$(function () {
$.ajax({
url:'getAll',
dataType : "json",//数据格式
type : "post",//请求方式
async : false,//是否异步请求
success : function(data)
{ //如果请求成功,返回数据。
//alert(data);
var text="日期范围<input type='text' class='form-control' id='btime' name='btime' placeholder='格式 2020-09-30 18:31:20'>-" +
"<input type='text' class='form-control' id='etime' name='etime' placeholder='格式 2020-09-30 18:31:20'>" +
"<input type='button' class='btn' value='查询' onclick='findbybetime()'>";
text+="<table class='table table-striped'><thead><tr>" +
"<th>时间</th><th>省份</th><th>市</th><th>确诊</th><th>治愈</th><th>死亡</th></tr></thead><tbody>";
for(i=0;i<data.length;i++)
{
text+="<tr>";
var cityName="";
if (data[i].cityName==null){
cityName="";
}else {
cityName=data[i].cityName;
}
text+="<td>"+data[i].time+"</td>" +
"<td>"+data[i].provinceName+"</td>" +
"<td>"+cityName+"</td>" +
"<td>"+data[i].confirmedCount+"</td>" +
"<td>"+data[i].curedCount+"</td>" +
"<td>"+data[i].deadCount+"</td>" +
"</tr>";
}
text+="</table>";
$("#getbydate").html(text);
},
error:function (e) {
alert("出错了!");
}
});
})
function findbybetime() {
var btime=$("#btime").val();
var etime=$("#etime").val();
//alert(btime+etime);
$.ajax({
url:'getByBETime',
dataType : "json",//数据格式
type : "post",//请求方式
async : false,//是否异步请求
data:{
"btime" : btime,
"etime" : etime
},
success : function(data)
{ //如果请求成功,返回数据。
//alert(data);
var text="日期范围<input type='text' class='form-control' id='btime' name='btime' placeholder='格式 2020-09-30 18:31:20'>-" +
"<input type='text' class='form-control' id='etime' name='etime' placeholder='格式 2020-09-30 18:31:20'>" +
"<input type='button' class='btn' value='查询' onclick='findbybetime()'>";
text+="<table class='table table-striped'><thead><tr>" +
"<th>时间</th><th>省份</th><th>市</th><th>确诊</th><th>治愈</th><th>死亡</th></tr></thead><tbody>";
for(i=0;i<data.length;i++)
{
text+="<tr>";
var cityName="";
if (data[i].cityName==null){
cityName="";
}else {
cityName=data[i].cityName;
}
text+="<td>"+data[i].time+"</td>" +
"<td>"+data[i].provinceName+"</td>" +
"<td>"+cityName+"</td>" +
"<td>"+data[i].confirmedCount+"</td>" +
"<td>"+data[i].curedCount+"</td>" +
"<td>"+data[i].deadCount+"</td>" +
"</tr>";
}
text+="</table>";
$("#getbydate").html(text);
},
error:function (e) {
alert("出错了!");
}
});
}
function findbytime() {
var time=$("#time").val();
//alert(time);
var myChart1 = echarts.init(document.getElementById('line'));
myChart1.setOption({
title:{
text:'确诊人数变化'
},
tooltip:{},
grid: {
left: '4%',
right: '4%',
bottom: '3%',
//是否显示刻度标签
containLabel: true
},
legend:{
data:['确诊数']
},
xAxis:{
data:[],
axisLabel:{
//横坐标全部显示
interval:0,
//横坐标倾斜45度
rotate:-45,
},
},
yAxis:{},
series:[{
name:'确诊数',
type:'line',
data:[]
}]
})
var pname=[];
var value=[];
//处理这段时间疫情总数变化趋势
$.ajax({
url:"findByTime",
type:"POST",
dataType:"JSON",
async:true,data:{
"time" : time,
},
success:function(data){
//alert(data);
for(var i=0;i<data.length;i++)
{
pname[i]=data[i].provinceName;
value[i]=parseInt(data[i].confirmedCount);
}
//alert(pname);
//alert(value);
myChart1.setOption({
xAxis:{
//放横坐标的数组
data:pname,
},
series:[{
name:'确诊数',
//每个横坐标对应的数值
data:value
}]
});
}
});
//处理地图
$.ajax({
url:"findByTime",
type:"POST",
dataType:"JSON",
async:true,data:{
"time" : time,
},
success:function(result){
mydata = new Array();
for(var i=0;i<result.length;i++){
mydata.push({
value: result[i].confirmedCount,
name: result[i].provinceName,
})
}
var myChart2 = echarts.init(document.getElementById('line2'));
var option1={
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
formatter : function(params){
index=params.dataIndex;
tip="<p>"+params.name+"</p><p>确诊人数:"+result[index].confirmedCount+"</p><p>治愈人数:"+result[index].curedCount+"</p><p>死亡人数:"+result[index].deadCount+"</p>";
return tip;
}
},
//左侧小导航图标
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高','低'],
inRange: {
color: ['#e0ffff', '#006edd']
},
show:true
},
//配置属性
series: [{
name : '疫情统计',
type: 'map',
mapType: 'china',
data: mydata,
roam : false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
}]
};
myChart2.setOption(option1);
}
});
}
</script>
</html>
4.3 后端代码
下载源代码查看
5、结果展示