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

程 妮，尚宇波

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

引言

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

1. 相關技術介紹

1.1 Vue框架

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

1.2 ECharts

ECharts是由百度團隊基于JavaScript開發(fā)的開源可視化圖庫，不僅可以在PC端與手機端上運行，還可以兼容市面上大部分的瀏覽器[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ù)據(jù)可視化系統(tǒng)的主要設計思路為：首先，充分了解人們通過疫情數(shù)據(jù)想要獲取什么信息，從而設計出相應的可視化圖表形式；其次，通過獲取網(wǎng)易公開數(shù)據(jù)接口來采集數(shù)據(jù)，并通過篩選、分析數(shù)據(jù)接口的數(shù)據(jù)來截取需要的數(shù)據(jù)；然后，結合Echarts可視化技術繪制圖表，并與數(shù)據(jù)進行匹配；最后通過連接服務器將可視化內容在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ù)據(jù)可視化系統(tǒng)由前端和后端兩個部分組成，系統(tǒng)框架如圖1所示。前端網(wǎng)頁使用JavaScript語言來構建，借助ECharts繪制動態(tài)圖表并實現(xiàn)數(shù)據(jù)可視化；后端則使用網(wǎng)易公開的數(shù)據(jù)接口來篩選數(shù)據(jù)，同時依賴數(shù)據(jù)接口的適配及服務器的協(xié)同配合，并通過搭載服務器上傳數(shù)據(jù)并顯示出來。

圖1 系統(tǒng)框架

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

數(shù)據(jù)可視化系統(tǒng)主要通過網(wǎng)易疫情數(shù)據(jù)接口獲取數(shù)據(jù)。由于數(shù)據(jù)在不停的更新，因此在獲取數(shù)據(jù)前安裝一個定時器，在規(guī)定時間內進行一次數(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)設計中最為重要的一個環(huán)節(jié)，將獲取的數(shù)據(jù)根據(jù)實際需求轉換成配置圖表所需要的格式，然后利用ECharts實現(xiàn)圖表的具體功能展示。在引入數(shù)據(jù)接口時，將每個接口數(shù)據(jù)與系統(tǒng)需要的圖表接口進行配置。將疫情數(shù)據(jù)接口與所需要的圖表接口配置好后，基于ECharts格式，對圖形數(shù)據(jù)進行處理時，為達到依照時間線將數(shù)據(jù)圖像化按比例展現(xiàn)的目的，設置相關參數(shù)定時執(zhí)行，然后參照圖表格式設置比例。

HTML中的實時數(shù)據(jù)是通過JavaScript來實現(xiàn)的，因此需要將JavaScript中的疫情數(shù)據(jù)渲染到HTML中；為了隨時可以查詢數(shù)據(jù)，系統(tǒng)專門設置了打印數(shù)據(jù)函數(shù)，便于直接在網(wǎng)頁端打印出所需要的數(shù)據(jù)，相關實現(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 頁面設計(可視化人機交互)

該系統(tǒng)通過Vue來搭建框架制作前端網(wǎng)頁，網(wǎng)頁作為系統(tǒng)數(shù)據(jù)可視化的載體，需要通過ECharts來呈現(xiàn)頁面數(shù)據(jù)可視化內容。具體實現(xiàn)過程如下：在系統(tǒng)項目目錄home.vue中引入靜態(tài)數(shù)據(jù)，將系統(tǒng)功能圖html里面寫入它們的id parameter 指向id，通過配置參數(shù)，將所需要的數(shù)據(jù)傳送進去，適配成功能圖所定義的格式。基于ECharts格式，在處理疫情數(shù)據(jù)時，為了將疫情數(shù)據(jù)處理成適配ECharts圖表的格式，需要設置相關參數(shù)并參照所需格式進行調配。每個圖表都對應一個不同的參數(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)主要是展示國內外的疫情動態(tài)，可視化統(tǒng)計界面主要如下：

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

全國疫情數(shù)據(jù)統(tǒng)計界面的主要功能就是能夠實時、準確地展示全國以及各個省份的最新疫情數(shù)據(jù)信息，包括境外輸入、累計確診、無癥狀感染者、累計死亡、現(xiàn)有確診、累計治愈等數(shù)據(jù)，上方配有明顯的日期時間可以很直觀的了解最新疫情信息，也可以隨意切換查看各個省份的疫情數(shù)據(jù)，從而做到信息精準獲取。系統(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ù)信息，日歷圖能夠讓人們深刻感知一月內每天的疫情數(shù)據(jù)信息的變動，像看日歷一樣去看每天的疫情信息，讓人們“一看即懂”。

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

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

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

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

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

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

4 系統(tǒng)測試

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

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

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

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

結束語

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

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