| 這個作業屬於哪個課程 | 2020春|W班(福州大學) |
|---|---|
| 這個作業要求在哪里 | 某次疫情統計可視化的實現 |
| 結對學號 | 221701123 & 221701139 |
| 這個作業的目標 | 實現某次疫情統計的可視化 |
| 作業正文 | https://www.cnblogs.com/cybersa/p/12493648.html |
| 其他參考文獻 | csdn,bootstrap,jsp,爬蟲等等 |
倉庫鏈接&項目地址&代碼規范
github倉庫鏈接：https://github.com/HongJieBin/InfectStatisticWeb
代碼規范鏈接：https://github.com/HongJieBin/InfectStatisticWeb/blob/dev/codestyle.md
項目地址: http://123.57.3.237:8080/InfectStatisticWeb/include/statistics.jsp(服務器好像在過十幾天就到期了)
項目功能演示
基本功能
實現疫情地圖的可視化及疫情趨勢圖的可視化 
附加功能
實現疫情地圖的提取和謠言粉碎消息的提取 
結對討論過程描述
開始的開放技術和版本討論
中間問題的解決
過程討論
描述設計實現過程
-
首先是對技術的要求，開始我們達成了用jsp框架開發的共識之后，新建了本次作業的github項目地址及技術版本，因為我們原型制作時采用的時app形式的原型，本來打算改原型的相關界面，但經過了一番討論后，還是覺得可以直接用JAVA EE實現類似手機app形式的前端頁面和交互，便開始了本次的作業。
-
前端采用bootstrap框架，后端的數據主要利用網上爬蟲的數據接口進行數據的傳入。
-
主要功能的實現地圖和圖表采用Echart實現，數據傳入使用數據接口api及json文件傳入。
功能結構 
關鍵代碼
地圖實現
chart.setOption({
title: {
text: '全國地圖',
subtext: '該頁面的數據僅供參考',
},
tooltip: {
trigger: 'item',
formatter:function(params){
return params.name+'<br />'+'確診人數：'+params['data']['value']+'<br />'+'死亡人數：'
+params['data']['dead']+'<br />'+'治愈人數：'+params['data']['heal'];
}//數據格式化
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
visualMap: {
type: 'piecewise',
pieces: [
{ min: 1000, max: 1000000, label: '大於等於1000人', color: '#372a28' },
{ min: 500, max: 999, label: '確診500-999人', color: '#4e160f' },
{ min: 100, max: 499, label: '確診100-499人', color: '#974236' },
{ min: 10, max: 99, label: '確診10-99人', color: '#ee7263' },
{ min: 1, max: 9, label: '確診1-9人', color: '#f5bba7' },
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
series: [{
name: '累積確診',
type: 'map',
map: 'china',
label:{
show: true
},
}
]
});
前端頁面代碼展示
<div id="wapper" style="width: 360px;height: 660px;">
<!-- 頭部區域 -->
<div id="header" style="width: 360px;height: 60px;">
<button type="button" class="btn btn-default" aria-label="Justify" style="height: 60px;width: 40px;
border-color: #6200EE;">
<span class="glyphicon glyphicon-align-left popup-icon" aria-hidden="true" style="font-size: 30px;color: white;"></span>
</button>
<span style="font-size: 20px;color: white;line-height: 20px;margin-left: 10px;">疫情統計</span>
<button type="button" class="btn btn-default" aria-label="Justify" style="height: 60px;width: 40px;
border-color: #6200EE;float: right;margin-right: 10px;">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true" style="font-size: 30px;color: white;"></span>
</button>
</div>
<!-- 彈出框 -->
<div id="popup">
<p style="height: 52px;width: 212px;font-size: 20px;margin: 10px 0px;">疫情</p>
<ul class="list-group blogroll">
<li class="list-group-item"><a href="statistics.jsp">疫情統計</a></li>
<li class="list-group-item"><a href="tendency.jsp">疫情趨勢</a></li>
<li class="list-group-item"><a href="news.jsp">疫情新聞</a></li>
<li class="list-group-item"><a href="rumor-broken.jsp">謠言粉碎機</a></li>
<li class="list-group-item"><a href="medical-information.jsp">醫療信息查詢</a></li>
<li class="list-group-item"><a href="contribution.jsp">奉獻</a></li>
</ul>
</div>
<!-- 身體區域 -->
<div id="body" style="width: 360px;height: 546px;">
<!-- 按鈕+實時數據標簽+橫線 -->
<div id="info-header">
<button type="button" class="btn btn-primary btn-lg btn-block" id="static-button">疫情統計</button>
<div id="update_time" style="margin: 0 auto;border-radius: 15px;width: 120px;height: 24px;border: 1px solid #009999;
font-size: 12px;line-height: 24px;"></div>
<div id="info-header-line">
<div></div>
<div></div>
</div>
</div>
<!-- 顯示信息區域 -->
<div id="info" style="width: 360px; height: 150px;position: relative;">
<!-- 顯示6個數據項 -->
<div class="info-block">
<h1>累計確診</h1>
<p id="confirm" style="color: #D9001B;"></p>
<p id="confirmAdd"></p>
</div>
<div class="info-block">
<h1>現存確診</h1>
<p id="nowConfirm" style="color: #FF6A57;"></p>
<p id="nowconfirmAdd"></p>
</div>
<div class="info-block">
<h1>現存重症</h1>
<p id="nowSevere" style="color: #476DA0;">51325</p>
<p id="SevereAdd"></p>
</div>
<div class="info-block">
<h1>現存疑似</h1>
<p id="suspect" style="color: #02A7F0;">51325</p>
<p id="suspectAdd"></p>
</div>
<div class="info-block">
<h1>累計死亡</h1>
<p id="dead" style="color: #A30014;">51325</p>
<p id="deadAdd"></p>