結對第二次作業 某次疫情統計視覺化的實現

2022-08-16 20:33:14 字數 3301 閱讀 8184

這個作業屬於哪個課程

2020春w班(福州大學)

這個作業要求在**

結對第二次作業——某次疫情統計視覺化的實現

結對學號

221701132、111700516

這個作業的目標

疫情統計視覺化的實現

作業正文

....

其他參考文獻

...我的github倉庫位址

我的**規範位址

主頁面展示

可輸入日期來檢視截至不同日期的全國疫情情況

全國地圖上使用不同的顏色代表大概確診人數區間,顏色的深淺表示疫情的嚴重程度,滑鼠移到每個省份會高亮顯示,預設選中湖北省

可以點選切換按鈕來更新地圖資料

點選滑鼠會顯示該省具體疫情情況

可以點選切換按鈕來更新折線圖資料,點選返回主頁面可以返回地圖介面

(由於我們打**交流比較多...所以文字交流較少)

日期輸入框

設計乙個輸入框,當輸入格式錯誤或超過提示的日期範圍時會彈出提示你重新輸入,點選輸入框旁邊的"查詢"按鈕觸發js函式從伺服器獲取資料。

資料顯示框

根據當前輸入日期設計乙個用於顯示現有確診、疑似確診等資料的統計模組。

地圖由於之前原型設計我們組就學習使用了echart圖表來進行地圖的內嵌,所以這次我們沿用了上次的做法進行編寫。使用者可以通過選擇的具體的日期生成全國地圖,在全國地圖上使用不同的顏色代表大概確診人數區間,顏色的深淺表示疫情的嚴重程度,可以直觀了解高危區域,滑鼠移到每個省份會高亮顯示,點選滑鼠會顯示該省具體疫情情況,可通過按鈕切換顯示資料。

資料讀取折線圖

沿用了原型設計的echart圖示。系統根據當前該省份到目前為止的新增確診趨勢、新增疑似趨勢、**趨勢和死亡趨勢分別生成該省份的趨勢變化曲線圖。可通過按鈕切換顯示資料。

資料顯示框

根據當前輸入日期設計乙個用於顯示現有確診、疑似確診等資料的統計模組。

資料讀取

對輸入日期的檢查

//檢查傳進來的日期格式

//日期格式的正規表示式

var reg = /\d-\d-\d/;//\d代表乙個數字,等價於[0-9],\d匹配乙個非數字字元,等價於[^0-9]

if(!reg.test(date.value))

f=false;

else

if(date.value=="")

else if(!f)

else

pageload(date.value,"現有確診");

//設定按鈕被選中狀態

if(change==true)

echart地圖引數設定

var mychart = echarts.init(document.getelementbyid('china-map'));

var option = ,

visualmap: ,,,

,,,,

],},

roamcontroller:

},......

用ajax讀取伺服器檔案並區域性更新頁面內容

//用到ajax框架

//接收到伺服器端相應後的工作

if(title=="現有確診")

mychart.setoption(setoption(now_diagnose));

else

mychart.setoption(setoption(total_diagnose));

var nation=province[0].split(" ");

document.getelementbyid("dia").innerhtml=nation[2];

document.getelementbyid("dou").innerhtml=nation[4];

document.getelementbyid("ic").innerhtml=nation[6];

document.getelementbyid("di").innerhtml=nation[8];

document.getelementbyid("do").innerhtml=nation[10];

document.getelementbyid("i").innerhtml=nation[12];

document.getelementbyid("time").innerhtml="更新至"+document.getelementbyid("date").value;}};

}

這次作業其實是我第一次這麼完整地寫乙個web專案(雖然是純前端),其中所用到的ajax以及echart框架都是現學的。一開始看著繁瑣的教程例子有些吃力,但通過閱讀官方的文件加上深入學習網路上的例子**,後面逐漸熟悉了起來,這讓我深刻認識到了閱讀文件對於學習一門技術的幫助。

其次,我感受到自己對於git這個軟體的使用還是很不熟。許多功能我還不會使用,以後要把相關知識不斷地進行補充。

我的隊友非常靠譜,他擅長查閱資料尋找素材,在編**的時候給我帶來了許多幫助。關於git的使用也是在他的指導下才順利完成。

結對第二次作業 某次疫情統計視覺化的實現

這個作業屬於哪個課程 2020春 s班 福州大學 這個作業要求在 結對第二次作業 結對學號 221701336 221701331 這個作業的目標 某次疫情統計視覺化的實現 作業正文 結對第二次作業部落格 其他參考文獻 前端部分 後端 爬蟲 let option tooltip 資料格式化 visu...

結對第二次作業 某次疫情統計視覺化的實現

一些註明 這個作業屬於哪個課程 2020春 s班 這個作業要求在 結對第二次作業 結對學號 021700613 041701407 這個作業的目標 疫情統計視覺化的實現等 作業正文 結對第二次作業 其他參考文獻 國內疫情概況 全國疫情圖 全國各省確診 數及排序 具體省份疫情變化趨勢 根據日期檢視全國...

結對第二次作業 某次疫情統計視覺化的實現

這個作業屬於哪個課程 2020春 s班 這個作業要求在 結對第二次作業 某次疫情統計視覺化的實現 結對學號 221701216 081700430 這個作業的目標 結合寒假第二次作業的成果實現疫情統計原型設計中的部分功能。作業正文 結對第二次作業 某次疫情統計視覺化的實現 其他參考文獻 b站 csd...