基于JavaScript的疫情數(shù)據(jù)可視化系統(tǒng)的設(shè)計與實現(xiàn)

程 妮，尚宇波

(運城學(xué)院 1. 數(shù)學(xué)與信息技術(shù)學(xué)院；2. 物理與電子工程系，山西 運城 044000)

引言

新冠肺炎疫情在2019年底爆發(fā)以后，很快就在全球蔓延。疫情的發(fā)展實況與每個人的生活、工作息息相關(guān)，因此，及時了解國內(nèi)外的疫情態(tài)勢十分重要。在大數(shù)據(jù)時代，海量數(shù)據(jù)只有被合理解讀和分析才能發(fā)揮其價值[1]，數(shù)據(jù)可視化可以豐富數(shù)據(jù)的表現(xiàn)形式，極大地提高數(shù)據(jù)的可讀性[2]。本文基于網(wǎng)易公開數(shù)據(jù)接口獲取疫情數(shù)據(jù)，利用JavaScript構(gòu)建前端網(wǎng)頁，通過使用ECharts可視圖標(biāo)庫，繪制疫情動態(tài)可視化統(tǒng)計圖，開發(fā)了一款疫情數(shù)據(jù)可視化系統(tǒng)。該數(shù)據(jù)可視化系統(tǒng)不僅能夠?qū)崟r更新國內(nèi)各省的疫情數(shù)據(jù)，也能以可視化動態(tài)圖的方式，將國內(nèi)外的疫情態(tài)勢直觀多樣化地呈現(xiàn)出來，對疫情監(jiān)測、信息查詢和疫情防控面有著重要作用[3]。

1. 相關(guān)技術(shù)介紹

1.1 Vue框架

Vue是一款非常靈活的前端框架，允許用戶自定義規(guī)則，運用于多個不同的項目，同時還可以提供強(qiáng)大的路由來處理各種大型程序。Vue不僅能夠通過正確的配置讓多種不同的構(gòu)建工具完美的協(xié)同工作，也可以單獨靈活地調(diào)整任何一種構(gòu)建工具從而滿足需要。

1.2 ECharts

ECharts是由百度團(tuán)隊基于JavaScript開發(fā)的開源可視化圖庫，不僅可以在PC端與手機(jī)端上運行，還可以兼容市面上大部分的瀏覽器[4]。除了兼容一維圖形與多維圖形，ECharts還可以兼容圖形與圖形組合使用，可提供生動直觀、可定制的交互式圖表，從而實現(xiàn)數(shù)據(jù)的可視化[5]。

1.3 JavaScript

JavaScript是一種基于底層編程、可多方交互的腳本語言，也是一款輕量化的前端框架編程語言，多用于開發(fā)web頁面，給網(wǎng)頁增加動態(tài)功能，具有函數(shù)優(yōu)先等特點。JavaScript不僅能夠直面對象，而且支持可操作式、命令式、函數(shù)式編程范式。

2. 系統(tǒng)設(shè)計

疫情數(shù)據(jù)可視化系統(tǒng)的主要設(shè)計思路為：首先，充分了解人們通過疫情數(shù)據(jù)想要獲取什么信息，從而設(shè)計出相應(yīng)的可視化圖表形式；其次，通過獲取網(wǎng)易公開數(shù)據(jù)接口來采集數(shù)據(jù)，并通過篩選、分析數(shù)據(jù)接口的數(shù)據(jù)來截取需要的數(shù)據(jù)；然后，結(jié)合Echarts可視化技術(shù)繪制圖表，并與數(shù)據(jù)進(jìn)行匹配；最后通過連接服務(wù)器將可視化內(nèi)容在web頁面上展示。

2.1 需求分析

面對實時更新的疫情數(shù)據(jù)，文本信息更新不及時，且很難被人們理解和消化[6]。而疫情數(shù)據(jù)可視化系統(tǒng)通過將大量的疫情數(shù)據(jù)生成直觀生動的可視動態(tài)圖，可實時更新并展示疫情數(shù)據(jù)[7]，再通過web平臺呈現(xiàn)給用戶，用戶能隨時通過登錄網(wǎng)址直觀了解最新的疫情信息。系統(tǒng)的功能描述如表1所示。

表1 疫情數(shù)據(jù)系統(tǒng)可視化系統(tǒng)的功能描述

2.2 技術(shù)框架設(shè)計

數(shù)據(jù)可視化系統(tǒng)由前端和后端兩個部分組成，系統(tǒng)框架如圖1所示。前端網(wǎng)頁使用JavaScript語言來構(gòu)建，借助ECharts繪制動態(tài)圖表并實現(xiàn)數(shù)據(jù)可視化；后端則使用網(wǎng)易公開的數(shù)據(jù)接口來篩選數(shù)據(jù)，同時依賴數(shù)據(jù)接口的適配及服務(wù)器的協(xié)同配合，并通過搭載服務(wù)器上傳數(shù)據(jù)并顯示出來。

圖1 系統(tǒng)框架

2.3 數(shù)據(jù)收集

數(shù)據(jù)可視化系統(tǒng)主要通過網(wǎng)易疫情數(shù)據(jù)接口獲取數(shù)據(jù)。由于數(shù)據(jù)在不停的更新，因此在獲取數(shù)據(jù)前安裝一個定時器，在規(guī)定時間內(nèi)進(jìn)行一次數(shù)據(jù)更新，從而保證數(shù)據(jù)的實時性。獲取疫情數(shù)據(jù)的代碼如下：

getData() {

returnrequest({

url:'/ug/api/wuhan/app/data/list-total',

method:"GET",

params:{

t:newDate().valueOf(),

}

}).then((data)=>{

if(data){

returndata;

}

}).catch((err)=>{

console.log('err',err)

});

},

2.4 數(shù)據(jù)處理和變換

數(shù)據(jù)處理和變換是整個系統(tǒng)設(shè)計中最為重要的一個環(huán)節(jié)，將獲取的數(shù)據(jù)根據(jù)實際需求轉(zhuǎn)換成配置圖表所需要的格式，然后利用ECharts實現(xiàn)圖表的具體功能展示。在引入數(shù)據(jù)接口時，將每個接口數(shù)據(jù)與系統(tǒng)需要的圖表接口進(jìn)行配置。將疫情數(shù)據(jù)接口與所需要的圖表接口配置好后，基于ECharts格式，對圖形數(shù)據(jù)進(jìn)行處理時，為達(dá)到依照時間線將數(shù)據(jù)圖像化按比例展現(xiàn)的目的，設(shè)置相關(guān)參數(shù)定時執(zhí)行，然后參照圖表格式設(shè)置比例。

HTML中的實時數(shù)據(jù)是通過JavaScript來實現(xiàn)的，因此需要將JavaScript中的疫情數(shù)據(jù)渲染到HTML中；為了隨時可以查詢數(shù)據(jù)，系統(tǒng)專門設(shè)置了打印數(shù)據(jù)函數(shù)，便于直接在網(wǎng)頁端打印出所需要的數(shù)據(jù)，相關(guān)實現(xiàn)函數(shù)如下：

loadData({ur1,parameter,mychart,data}){

if(data){

switch(parameter){

case'CalendarOption':

returnthis.getCalendarOption(data,myChart);

case'StackingOption':

returnthis.getStackingOption(data,myChart);

case'GraphOption':

returnthis.getGraphOption(data,myChart);

case'LineOption':

returnthis.getLineOption(data,myChart);

case'HistogramOption':

returnthis.getHistogramOption(data,myChart);

default:

return{};

}

}

2.5 頁面設(shè)計(可視化人機(jī)交互)

該系統(tǒng)通過Vue來搭建框架制作前端網(wǎng)頁，網(wǎng)頁作為系統(tǒng)數(shù)據(jù)可視化的載體，需要通過ECharts來呈現(xiàn)頁面數(shù)據(jù)可視化內(nèi)容。具體實現(xiàn)過程如下：在系統(tǒng)項目目錄home.vue中引入靜態(tài)數(shù)據(jù)，將系統(tǒng)功能圖html里面寫入它們的id parameter 指向id，通過配置參數(shù)，將所需要的數(shù)據(jù)傳送進(jìn)去，適配成功能圖所定義的格式。基于ECharts格式，在處理疫情數(shù)據(jù)時，為了將疫情數(shù)據(jù)處理成適配ECharts圖表的格式，需要設(shè)置相關(guān)參數(shù)并參照所需格式進(jìn)行調(diào)配。每個圖表都對應(yīng)一個不同的參數(shù)，以其中一個圖表為例，配置格式的代碼如下：

Var pieInitialized;

setTimeout(function () {

pieInitialized = ture;

mychart.setoption({

series: getpieSeries(scatterdate, myChart)});

},10);

App.onresize = function () {

if (pieInitialized) {

myChart.setoption({

series : getPieSeriesUpdate (scatterData,

});

}

}；

Return option;

}，

3 系統(tǒng)實現(xiàn)(用戶感知)

系統(tǒng)實現(xiàn)主要是展示國內(nèi)外的疫情動態(tài)，可視化統(tǒng)計界面主要如下：

3.1 全國疫情數(shù)據(jù)統(tǒng)計界面

全國疫情數(shù)據(jù)統(tǒng)計界面的主要功能就是能夠?qū)崟r、準(zhǔn)確地展示全國以及各個省份的最新疫情數(shù)據(jù)信息，包括境外輸入、累計確診、無癥狀感染者、累計死亡、現(xiàn)有確診、累計治愈等數(shù)據(jù)，上方配有明顯的日期時間可以很直觀的了解最新疫情信息，也可以隨意切換查看各個省份的疫情數(shù)據(jù)，從而做到信息精準(zhǔn)獲取。系統(tǒng)界面如圖2所示。

圖2 系統(tǒng)界面圖

3.2 疫情情況動態(tài)統(tǒng)計圖

疫情情況動態(tài)統(tǒng)計圖界面通過堆疊圖、象形圖、折線圖等多樣的動態(tài)圖表生動、直觀地展示了全國疫情情況以及世界疫情態(tài)勢的信息數(shù)據(jù)。

(1)“全國疫情動態(tài)播報”模塊以日歷圖的形式展示了全國在近兩個月每日確診、疑似、治愈、死亡的數(shù)據(jù)信息，日歷圖能夠讓人們深刻感知一月內(nèi)每天的疫情數(shù)據(jù)信息的變動，像看日歷一樣去看每天的疫情信息，讓人們“一看即懂”。

(2)“海外疫情動態(tài)播報”模塊以條形堆疊圖的形式展示了世界范圍內(nèi)當(dāng)日確診排名前十的國家在確診、疑似、治愈、死亡、重癥、病例增加的數(shù)據(jù)信息，也可以通過點擊圖表上方的信息按鍵選擇只展示一個或幾個疫情數(shù)據(jù)信息。堆疊圖能直觀地展示每天全世界疫情數(shù)據(jù)嚴(yán)重的十個國家，通過數(shù)據(jù)排序讓人們能了解疫情最嚴(yán)重的十個國家的疫情發(fā)展趨勢。

(3)“全國現(xiàn)有確診”模塊以象形動態(tài)圖的形式展示了近期我國現(xiàn)有確診人數(shù)的一個動態(tài)趨勢。象形圖以“病毒圖案”代表我國的確診感染人數(shù)，通過圖案的增加與減少來表示我國近一年內(nèi)確診人數(shù)的變化，有助于梳理疫情態(tài)勢，增強(qiáng)人們對于趨勢變化的感知。全國現(xiàn)有確診情況。

(4)“全球累計確診國家”模塊以折線圖的形式展示了全球累計確診排名前十的國家，可以很直觀的看出各國家之間疫情確診、治愈、死亡人數(shù)的差異。全球累計確診的前十名國家，如圖3所示。

圖3 全球累計確診國家(前十)效果圖

(5)“新增確診國家”模塊以柱狀圖的形式展示了全球當(dāng)日新增確診、治愈、死亡人數(shù)排名前十的國家。新增確診前十名的國家，如圖4所示。

圖4 新增確診國家(前十)效果圖

4 系統(tǒng)測試

系統(tǒng)測試主要通過數(shù)據(jù)端檢測和鏈接檢測進(jìn)行：

數(shù)據(jù)端檢測在系統(tǒng)測試環(huán)節(jié)是非常重要的，在后端操作時數(shù)據(jù)接口最容易出現(xiàn)兩種錯誤：一種是數(shù)據(jù)接口傳遞數(shù)據(jù)時出現(xiàn)錯誤，這種錯誤往往是網(wǎng)絡(luò)延遲造成的；還有一種是數(shù)據(jù)傳遞的類型和數(shù)據(jù)表字段類型不一致，為了解決問題，可以提前驗證表單的完整性。

鏈接檢測主要是檢測網(wǎng)站上的鏈接是否是可以被點擊的，該測試通常分為三個板塊：(1)檢查鏈接是否都指向正確的頁面；(2)檢查所指向的頁面的正確性；(3)檢查 web應(yīng)用程序中的頁面是否已被隔離。如果出現(xiàn)問題，則要重新更改鏈接地址，給用戶一個合適的連接。當(dāng)用戶瀏覽網(wǎng)頁時，若網(wǎng)址出現(xiàn)錯誤，會提示“404錯誤網(wǎng)頁”，并提醒用戶回到現(xiàn)有網(wǎng)頁。

通過對數(shù)據(jù)端和鏈接等環(huán)節(jié)對系統(tǒng)進(jìn)行反復(fù)測試，根據(jù)發(fā)現(xiàn)的問題進(jìn)一步完善系統(tǒng)，最終測試結(jié)果顯示系統(tǒng)運行正常。

結(jié)束語

隨著互聯(lián)網(wǎng)時代的迅速發(fā)展，數(shù)據(jù)可視化在全球掀起了一股熱潮，被應(yīng)用于越來越多的場景?；贘avaScript開發(fā)的疫情數(shù)據(jù)可視化系統(tǒng)，使用Vue Cli創(chuàng)建項目把前端網(wǎng)頁做成一個完整的系統(tǒng)，所需依賴包以及插件的導(dǎo)入安裝與使用，通過ECharts繪制豐富多樣的動態(tài)圖表，對疫情數(shù)據(jù)進(jìn)行多方面的展示，對人們把握疫情走向，增強(qiáng)疫情防范意識，提高共同抗疫的警覺有著極大的作用[8]。

本系統(tǒng)尚存在一些不足，仍需做些改進(jìn)，比如可以繪制一款疫情地圖，根據(jù)不同的顏色來標(biāo)記感染人數(shù)的多少，以便人們對全國各地區(qū)的疫情有一個直觀地把握；通過爬取其他網(wǎng)站的實時追蹤感染者的定位能及時查看到感染者的活動軌跡，為今后疫情防控工作提供幫助。