項目源代碼及數據：下載
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、結果展示
