孫遜 李潤(rùn)澤 趙宏宇 劉斌

摘要：為了將從全國(guó)各省市年鑒中提取出來(lái)的鐵路物流數(shù)據(jù)以更直觀的方式展示，降低用戶(hù)的使用門(mén)檻，在以文本化方式展示數(shù)據(jù)的基礎(chǔ)上，提出了實(shí)現(xiàn)鐵路物流數(shù)據(jù)可視化的功能。將鐵路數(shù)據(jù)以可視化方式呈現(xiàn)有助于用戶(hù)迅速地從海量的鐵路物流數(shù)據(jù)中迅速獲取到所需要的重要信息，也可以更加直觀形象地表達(dá)數(shù)據(jù)所蘊(yùn)含的信息，更易于用戶(hù)尋找數(shù)據(jù)變化的趨勢(shì)和規(guī)律以及發(fā)現(xiàn)數(shù)據(jù)之間更深層次的聯(lián)系。應(yīng)用Javascript語(yǔ)言的可視化圖表庫(kù)ECharts實(shí)現(xiàn)了對(duì)鐵路物流Web項(xiàng)目中鐵路物流基礎(chǔ)指標(biāo)數(shù)據(jù)以及綜合指標(biāo)數(shù)據(jù)的動(dòng)態(tài)展示，可以展示各個(gè)模塊隨著年份的走勢(shì)（折線(xiàn)圖）或者占比（扇形圖）情況。

關(guān)鍵詞： 鐵路物流; ECharts可視化庫(kù); 數(shù)據(jù)可視化; 網(wǎng)頁(yè)項(xiàng)目; 動(dòng)態(tài)可視化

中圖分類(lèi)號(hào)：TP311 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）32-0022-04

Realization of Visualization of Railway Logistics Data Based on ECharts

SUN Xun1，LI Run-ze2 ，ZHAO Hong-yu2，LIU Bin1

（1. China Railway Siyuan Survey and Design Group Co.，Ltd.， Wuhan 430063， China; 2.Southwest Jiaotong University， Chengdu 611765， China）

Abstract：To display the railway logistics data extracted from the yearbooks of various provinces and cities across the country in a more intuitive way and reduce the user's threshold for use， on the basis of displaying the data in a textual manner， the function of realizing railway logistics data visualization is proposed. Visualizing the railway data will help users quickly obtain the important information they need from the massive railway logistics data. It can ?express the information contained in the data more intuitively and visually. It is easier for users to look for trends and laws of data changes and discover deeper connections between data.Finally， the dynamic display of railway logistics basic index data and comprehensive index data in the railway logistics web project is realized by the use of visual chart library ECharts， which can display the trend （line chart） or proportion （fan chart） of each module with the year .

Key words： railway logistics; ECharts; data visualization; web project; dynamic visualization

隨著互聯(lián)網(wǎng)的迅速發(fā)展，互聯(lián)網(wǎng)產(chǎn)業(yè)已經(jīng)逐步深入社會(huì)各行各業(yè)，深刻地改變了人們之間的信息訪問(wèn)與共享方式。不同的傳統(tǒng)行業(yè)也在充分探索與互聯(lián)網(wǎng)結(jié)合的方式，在信息化浪潮中煥發(fā)出新的生機(jī)。鐵路物流數(shù)據(jù)分析與智能平臺(tái)Web項(xiàng)目中存在著大量的來(lái)自全國(guó)各個(gè)省市統(tǒng)計(jì)年鑒的基礎(chǔ)鐵路物流數(shù)據(jù)指標(biāo)，同時(shí)也存在著難以高效地利用海量無(wú)序的鐵路物流數(shù)據(jù)的問(wèn)題?；谖谋净绞秸故捐F路物流數(shù)據(jù)不夠清晰直觀，使用戶(hù)難以迅速準(zhǔn)確地去捕捉巨量數(shù)據(jù)中的核心信息。如何更好地將這些數(shù)據(jù)展示給用戶(hù)，并在展示的基礎(chǔ)上對(duì)其進(jìn)行分析、研究、挖掘成了當(dāng)務(wù)之急。將鐵路物流數(shù)據(jù)以圖表可視化形式展現(xiàn)比傳統(tǒng)的文本化展示更加直觀也更具有實(shí)用性，提高了數(shù)據(jù)的可讀性。在將數(shù)據(jù)可視化的同時(shí)也對(duì)數(shù)據(jù)進(jìn)行了清洗降維，允許用戶(hù)按照不同需求對(duì)不同的指標(biāo)的對(duì)比、分析、計(jì)算結(jié)果進(jìn)行可視化，從不同的維度來(lái)展現(xiàn)數(shù)據(jù)趨勢(shì)。

本文實(shí)現(xiàn)了基于ECharts的動(dòng)態(tài)數(shù)據(jù)展示功能，允許用戶(hù)按照自己的需求交互式地在網(wǎng)頁(yè)上選擇不同的城市、不同的指標(biāo)、不同的年份并進(jìn)行展示、對(duì)比、分析等，可以實(shí)時(shí)地在用戶(hù)增加新的數(shù)據(jù)或者刪除已有數(shù)據(jù)時(shí)動(dòng)態(tài)地生成不同的圖表，包括柱狀圖、折線(xiàn)圖、餅狀圖等。

1 背景需求介紹

本文中物流數(shù)據(jù)的可視化是針對(duì)鐵路物流數(shù)據(jù)分析與智能平臺(tái)web項(xiàng)目中存在的海量的物流數(shù)據(jù)而實(shí)現(xiàn)。該項(xiàng)目中，基礎(chǔ)物流數(shù)據(jù)來(lái)自全國(guó)不同年份不同省份的統(tǒng)計(jì)年鑒，這些數(shù)據(jù)經(jīng)過(guò)處理存入數(shù)據(jù)庫(kù)中后，在城市上、指標(biāo)上、年份上均無(wú)序排列，用戶(hù)無(wú)法迅速地定位目標(biāo)物流數(shù)據(jù)指標(biāo)，更無(wú)法從雜亂的數(shù)據(jù)中挖掘出更深層次的信息。除了基礎(chǔ)物流數(shù)據(jù)外，還有基于此的綜合物流數(shù)據(jù)。因此，迫切地需要將該項(xiàng)目中的物流指標(biāo)數(shù)據(jù)按照一定的順序展現(xiàn)給用戶(hù)，為進(jìn)一步地查看、統(tǒng)計(jì)、分析做好基礎(chǔ)。

本文中基于ECharts的物流數(shù)據(jù)可視化分別提供了按照城市、按照指標(biāo)、按照年份三個(gè)不同維度的可視化，為用戶(hù)提供了多樣的可視化方式，有助于用戶(hù)直觀地觀察數(shù)據(jù)，并在此基礎(chǔ)上進(jìn)一步對(duì)數(shù)據(jù)進(jìn)行分析等。

2 關(guān)鍵技術(shù)介紹

2.1 ZRender

ZRender是一個(gè)輕量級(jí)的Canvas類(lèi)庫(kù)，MVC封裝，數(shù)據(jù)驅(qū)動(dòng)，提供類(lèi)Dom事件模型，提供了 Canvas、SVG、VML 等多種渲染方式。ZRender 也是 ECharts 的底層渲染器。ZRender Architecture通過(guò)MVC核心封裝實(shí)現(xiàn)圖形倉(cāng)庫(kù)、視圖渲染和交互控制。ZRender具有數(shù)據(jù)驅(qū)動(dòng)，完整的事件封裝，高效的分層刷新，豐富的圖形選項(xiàng)，強(qiáng)大的動(dòng)畫(huà)支持，易于擴(kuò)展等特色，這些特色使得它做各種動(dòng)畫(huà)效果時(shí)十分有用，性能也更加出色，如圖1所示。

2.2 ECharts

ECharts，一個(gè)純 JavaScript 的圖表庫(kù)，可以流暢地運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴(lài)輕量級(jí)的 Canvas 類(lèi)庫(kù) ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts具有豐富的可視化類(lèi)型，包括常規(guī)的折線(xiàn)圖、柱狀圖、散點(diǎn)圖、餅圖、k線(xiàn)圖，用于統(tǒng)計(jì)的盒形圖等等。ECharts由數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)的改變驅(qū)動(dòng)圖表展現(xiàn)的改變。因此動(dòng)態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡(jiǎn)單，只需獲取數(shù)據(jù)，填入數(shù)據(jù)，ECharts會(huì)找到兩組數(shù)據(jù)之間的差異然后通過(guò)合適的動(dòng)畫(huà)去表現(xiàn)數(shù)據(jù)的變化。除此之外ECharts還進(jìn)行了移動(dòng)端優(yōu)化并支持多維數(shù)據(jù)以及豐富的視覺(jué)編碼手段。

3 基于ECharts的可視化實(shí)現(xiàn)

ECharts作為一個(gè)純 JavaScript 的圖表庫(kù)，可以根據(jù)用戶(hù)需求來(lái)定制不同的可視化圖表，本文基于ECharts實(shí)現(xiàn)了柱狀圖，折線(xiàn)圖，餅狀圖三種不同類(lèi)型的圖表，將物流指標(biāo)數(shù)據(jù)以圖形化的方式呈現(xiàn)給用戶(hù)。

在對(duì)ECharts進(jìn)行基于鐵路物流數(shù)據(jù)的個(gè)性化設(shè)置前，需要將Echarts.js文件引入到<script>標(biāo)簽中，并在此標(biāo)簽中配置目標(biāo)可視化圖表的使用路徑。之后在<script>標(biāo)簽中加載用于顯示可視化圖表的Dom元素，初始化ECharts圖表，最后對(duì)回調(diào)函數(shù)中的option做個(gè)性化數(shù)值設(shè)置。接下來(lái)以柱狀圖為例進(jìn)行說(shuō)明。

在繪制物流數(shù)據(jù)可視化圖表時(shí)，首先使用getDataObj（）方法對(duì)Echarts圖表series的各種參數(shù)進(jìn)行配置。之后基于準(zhǔn)備好的Dom，初始化ECharts圖表。最后在option配置tooltip，legend等屬性，生成可視化圖表，代碼如下。

function drawBar（）{

let checkedYears ?= [];

$（"：checkbox：checked"）.each（function（）{

checkedYears.push（（$（this）.parent（）.next（）.text（）））;

}）;

let series = [];//用于初始化相關(guān)參數(shù)

for（let i=0;i<vm.fields.length;i++）{

let obj = getDataObj（vm.fields[i]，chartType，

vm.getData（vm.fields[i]））;

let newData = [];

for（let k=0;k<vm.getYears.length;k++）

for（let j=0;j<checkedYears.length;j++）

if（vm.getYears[k]+""===checkedYears[j]）

newData.push（obj.data[k]）;

obj.data = newData;

series.push（obj）;

}

const myChart = echarts.init

（document.getElementById（"chart"））;

let option = {

tooltip： {trigger： 'item'}，//trigger為item時(shí)僅該點(diǎn)的相關(guān)數(shù)據(jù)

xAxis： {data： checkedYears}，//橫軸為年份

yAxis： {type： 'value'}，//縱軸為數(shù)值

legend： {data ：vm.fields}，

series： series

};

myChart.setOption（option）;

}

4 基礎(chǔ)/綜合數(shù)據(jù)指標(biāo)的動(dòng)態(tài)數(shù)據(jù)展示

4.1基礎(chǔ)數(shù)據(jù)/綜合數(shù)據(jù)指標(biāo)介紹

在本節(jié)中，我們主要介紹基礎(chǔ)數(shù)據(jù)指標(biāo)以及在其之上衍生出的綜合數(shù)據(jù)指標(biāo)的動(dòng)態(tài)展示功能。

在鐵路物流數(shù)據(jù)分析與智能平臺(tái)web項(xiàng)目中，基礎(chǔ)數(shù)據(jù)指標(biāo)共有十大類(lèi)：綜合數(shù)據(jù)，農(nóng)業(yè)數(shù)據(jù)，貿(mào)易數(shù)據(jù)，消費(fèi)數(shù)據(jù)，金融數(shù)據(jù)，貨運(yùn)數(shù)據(jù)，客運(yùn)數(shù)據(jù)，交通基礎(chǔ)數(shù)據(jù)，工業(yè)數(shù)據(jù)，綠色城市數(shù)據(jù)，每一類(lèi)數(shù)據(jù)指標(biāo)下又有更具體的指標(biāo)劃分。這些數(shù)據(jù)來(lái)自全國(guó)不同省份不同年份的統(tǒng)計(jì)年鑒，數(shù)據(jù)量巨大，很難從中找到目標(biāo)信息，也不利于對(duì)數(shù)據(jù)進(jìn)行分析。在該模塊中，實(shí)現(xiàn)了基于ECharts的動(dòng)態(tài)數(shù)據(jù)展示功能，有利于用戶(hù)更加直接地了解相關(guān)數(shù)據(jù)，也可以幫助用戶(hù)將不同的指標(biāo)進(jìn)行對(duì)比或者研究其發(fā)展趨勢(shì)。

在鐵路物流數(shù)據(jù)分析與智能平臺(tái)web項(xiàng)目中，除了十大類(lèi)基礎(chǔ)數(shù)據(jù)指標(biāo)，還有在其之上衍生出的綜合指標(biāo)，分別如下：

商流輻射力=城市社會(huì)消費(fèi)品額/（人均消費(fèi)支出*總?cè)丝冢罕硎境鞘邢M(fèi)中由其他地域帶動(dòng)的能力，也表明了一個(gè)城市的商業(yè)活動(dòng)對(duì)其他地區(qū)消費(fèi)的影響程度和吸引能力，城市的商流輻射力越強(qiáng)，其流通產(chǎn)業(yè)對(duì)外部需求和消費(fèi)的吸引力就越強(qiáng)。

物流輻射力=（貨運(yùn)總量/地區(qū)生產(chǎn)總值）/（全國(guó)貨運(yùn)總量/國(guó)內(nèi)生產(chǎn)總值）：反映一個(gè)城市在物流方面的優(yōu)勢(shì)，體現(xiàn)城市貨運(yùn)對(duì)全國(guó)輻射能力，物流輻射力直接衡量了城市的貨運(yùn)優(yōu)勢(shì)，體現(xiàn)了城市物流環(huán)節(jié)的運(yùn)營(yíng)效率。

貨源輻射力=絕對(duì)貨源輻射力：進(jìn)口總額、出口總額、進(jìn)出口總額;相對(duì)貨源輻射力：外貿(mào)依存度：衡量城市商品流通體系中非本城市商品的價(jià)值額，體現(xiàn)了城市對(duì)其他城市商品參與城市流通體系的吸引力和城市商品對(duì)周邊及海外城市的輻射力。

外貿(mào)依存度=進(jìn)出口總額/國(guó)內(nèi)生產(chǎn)總值：反映一個(gè)地區(qū)的對(duì)外貿(mào)易活動(dòng)對(duì)該地區(qū)經(jīng)濟(jì)發(fā)展的影響和依賴(lài)程度的經(jīng)濟(jì)分析指標(biāo)，反映一個(gè)地區(qū)的外向程度。

貨運(yùn)強(qiáng)度=某區(qū)段的貨運(yùn)周轉(zhuǎn)量/區(qū)段線(xiàn)路的長(zhǎng)度：鐵路全線(xiàn)或某一區(qū)段平均每公里線(xiàn)路所擔(dān)負(fù)的貨物周轉(zhuǎn)量。

人口經(jīng)濟(jì)密度=每年區(qū)域生產(chǎn)總值/城市或區(qū)域常住人口數(shù)：反映客觀上存在的人口分布與經(jīng)濟(jì)發(fā)展相互關(guān)系的地區(qū)差異的指標(biāo)。

土地經(jīng)濟(jì)密度=每年區(qū)域生產(chǎn)總值/城市或區(qū)域面積：表征了城市單位面積上經(jīng)濟(jì)活動(dòng)的效率和土地利用的密集程度。

進(jìn)出口貿(mào)易生成系數(shù)=出入境貨運(yùn)量/外貿(mào)進(jìn)出口總額：反映貨物及運(yùn)輸結(jié)構(gòu)的變化。

區(qū)域熵：Q=S/P，式中，Q為區(qū)域的經(jīng)濟(jì)區(qū)位熵，S和P分別為該區(qū)域GDP和人口數(shù)占全國(guó)的比重：衡量某一區(qū)域要素的空間分布情況，反映某一產(chǎn)業(yè)部門(mén)的專(zhuān)業(yè)化程度，以及某一區(qū)域在高層次區(qū)域的地位和作用等方面。在產(chǎn)業(yè)結(jié)構(gòu)研究中，運(yùn)用區(qū)位熵指標(biāo)主要是分析區(qū)域主導(dǎo)專(zhuān)業(yè)化部門(mén)的狀況。

各地農(nóng)業(yè)總產(chǎn)值占GDP比重（農(nóng)業(yè)總產(chǎn)值/GDP總量）*100%：反映各地的農(nóng)業(yè)產(chǎn)值在區(qū)域生產(chǎn)中所占據(jù)的地位，一般來(lái)說(shuō)，現(xiàn)代化程度高的區(qū)域農(nóng)業(yè)在經(jīng)濟(jì)中所占的地位是比較低的。

地區(qū)貿(mào)易差異度=∑（Ti-T'）2/T）：Ti表示區(qū)域內(nèi)各地區(qū)貿(mào)易額，T'和T表示區(qū)域內(nèi)各地區(qū)平均貿(mào)易額和總貿(mào)易額。

消費(fèi)對(duì)經(jīng)濟(jì)增長(zhǎng)的貢獻(xiàn)率=（當(dāng)年消費(fèi)-上年消費(fèi)）/（當(dāng)年國(guó)內(nèi)生產(chǎn)總值-上年國(guó)內(nèi)生產(chǎn)總值）：反映了區(qū)域內(nèi)各地區(qū)貿(mào)易發(fā)展水平差異程度的值越大說(shuō)明地區(qū)結(jié)構(gòu)失衡越嚴(yán)重。

金融服務(wù)使用率=人均從銀行獲得貸款/人均GDP;人均從銀行獲得存款/人均GDP：用于衡量地方金融水平。

各運(yùn)輸方式客運(yùn)量占綜合運(yùn)輸客運(yùn)總量的比重=一定時(shí)期公路運(yùn)輸完成的客運(yùn)量/同時(shí)間內(nèi)綜合運(yùn)輸客運(yùn)總量：體現(xiàn)各客運(yùn)行業(yè)在客運(yùn)綜合運(yùn)輸體系中的地位，是衡量行業(yè)運(yùn)輸能力的基礎(chǔ)性指標(biāo)，客運(yùn)量反各運(yùn)輸方式周轉(zhuǎn)量占綜合運(yùn)輸客運(yùn)周轉(zhuǎn)量的比重=一定時(shí)期公路運(yùn)輸完成的客運(yùn)周轉(zhuǎn)量/同時(shí)間內(nèi)綜合運(yùn)輸客運(yùn)周轉(zhuǎn)總量：體現(xiàn)各客運(yùn)行業(yè)在客運(yùn)綜合運(yùn)輸體系中的地位，是衡量行業(yè)運(yùn)輸能力的基礎(chǔ)性指標(biāo)，周轉(zhuǎn)量是運(yùn)輸和運(yùn)輸距離的運(yùn)輸生產(chǎn)產(chǎn)量，反映出位移需求活動(dòng)中發(fā)生的實(shí)際空間位移的大小。

中西部地區(qū)貿(mào)易比重=（中部和西部地區(qū)進(jìn)出口貿(mào)易額/我國(guó)貿(mào)易總額）*100%：中部和西部地區(qū)進(jìn)出口貿(mào)易額占我國(guó)貿(mào)易總體比重。

外貿(mào)對(duì)GDP貢獻(xiàn)率=凈出口增量/GDP增量：凈出口增量與GDP增量的比值，反映經(jīng)濟(jì)增長(zhǎng)中由外貿(mào)增長(zhǎng)所引起的部分，其比值越大，說(shuō)明外貿(mào)對(duì)經(jīng)濟(jì)增長(zhǎng)的影響力越大。

在該模塊中，用戶(hù)同樣可以分別按指標(biāo)、按城市、按年份將目標(biāo)綜合指標(biāo)可視化，提供了不同城市不同年份不同指標(biāo)之間的對(duì)比、發(fā)展趨勢(shì)、占比等各運(yùn)輸方式周轉(zhuǎn)量占綜合運(yùn)輸客運(yùn)周轉(zhuǎn)量的比重=一定時(shí)期公路運(yùn)輸完成的客運(yùn)周轉(zhuǎn)量/同時(shí)間內(nèi)綜合運(yùn)輸客運(yùn)周轉(zhuǎn)總量：體現(xiàn)各客運(yùn)行業(yè)在客運(yùn)綜合運(yùn)輸體系中的地位，是衡量行業(yè)運(yùn)輸能力的基礎(chǔ)性指標(biāo)，周轉(zhuǎn)量是運(yùn)輸和運(yùn)輸距離的運(yùn)輸生產(chǎn)產(chǎn)量，反映出位移需求活動(dòng)中發(fā)生的實(shí)際空間位移的大小。

中西部地區(qū)貿(mào)易比重=（中部和西部地區(qū)進(jìn)出口貿(mào)易額/我國(guó)貿(mào)易總額）*100%：中部和西部地區(qū)進(jìn)出口貿(mào)易額占我國(guó)貿(mào)易總體比重。

外貿(mào)對(duì)GDP貢獻(xiàn)率=凈出口增量/GDP增量：凈出口增量與GDP增量的比值，反映經(jīng)濟(jì)增長(zhǎng)中由外貿(mào)增長(zhǎng)所引起的部分，其比值越大，說(shuō)明外貿(mào)對(duì)經(jīng)濟(jì)增長(zhǎng)的影響力越大。

無(wú)論是基礎(chǔ)數(shù)據(jù)指標(biāo)還是綜合數(shù)據(jù)指標(biāo)，都為用戶(hù)提供了分別按照城市、指標(biāo)、年份進(jìn)行可視化的選擇，也都為用戶(hù)提供了柱狀圖、折線(xiàn)圖、餅狀圖三種不同的可視化圖形，有助于用戶(hù)從不同維度去分析數(shù)據(jù)。

4.2基礎(chǔ)數(shù)據(jù)按照城市可視化

在該模塊中，用戶(hù)首先選擇目標(biāo)城市，然后選擇目標(biāo)指標(biāo)，進(jìn)行查詢(xún)后即可將對(duì)應(yīng)城市對(duì)應(yīng)指標(biāo)物流數(shù)據(jù)進(jìn)行可視化。生成以年份為橫軸，指標(biāo)數(shù)值為縱軸的柱狀圖。圖2為湖北省武漢市2010-2017年綜合數(shù)據(jù)指標(biāo)的可視化。在圖表上方有不同指標(biāo)所對(duì)應(yīng)的顏色標(biāo)簽，用戶(hù)可以通過(guò)點(diǎn)擊標(biāo)簽將對(duì)應(yīng)標(biāo)簽從圖中隱藏，同時(shí)可視化圖表的坐標(biāo)軸也會(huì)隨之改變，如圖3所示。

除了為用戶(hù)提供可視化圖表之外，還會(huì)在下方基于圖表生成對(duì)應(yīng)的表格，用戶(hù)可以在表格中選擇隱藏部分年份，從而更加直接地觀察目標(biāo)年份的相關(guān)指標(biāo)數(shù)據(jù)，如圖4所示。

該模塊中除了實(shí)現(xiàn)柱狀圖之外，還實(shí)現(xiàn)了折線(xiàn)圖、餅狀圖，用戶(hù)可以動(dòng)態(tài)地選擇不同的圖形來(lái)滿(mǎn)足需求。當(dāng)用戶(hù)將不同的指標(biāo)或年份等參數(shù)加入圖表中時(shí)，都會(huì)動(dòng)態(tài)重新繪制相關(guān)圖表。從柱狀圖中可以直觀地看出不同基礎(chǔ)數(shù)據(jù)指標(biāo)的具體數(shù)據(jù)以及各個(gè)基礎(chǔ)數(shù)據(jù)指標(biāo)之間的差異，從折線(xiàn)圖中可以清晰地看出不同基礎(chǔ)數(shù)據(jù)指標(biāo)隨著時(shí)間的發(fā)展趨勢(shì)，而從餅狀圖中可以看出某一基礎(chǔ)數(shù)據(jù)指標(biāo)的占比情況。除此之外，無(wú)論是哪種圖表，都可以在鼠標(biāo)指針?lè)派先r(shí)顯示更加詳細(xì)的信息，如圖5-圖7所示。同時(shí)不同的圖表中都會(huì)使用不同的顏色來(lái)標(biāo)記不同的指標(biāo)，使得相關(guān)信息更加直觀地展現(xiàn)出來(lái)。

4.3 基礎(chǔ)數(shù)據(jù)按照指標(biāo)可視化

基礎(chǔ)數(shù)據(jù)按照城市可視化主要是展示同一城市不同指標(biāo)不同年份的物流指標(biāo)數(shù)據(jù)，而按照指標(biāo)可視化則是展示同一指標(biāo)不同城市不同年份之間的關(guān)系，同樣也提供了柱狀圖、折線(xiàn)圖、餅狀圖三種不同的可視化圖表以及對(duì)應(yīng)的數(shù)據(jù)表格，如圖8所示。

4.4 基礎(chǔ)數(shù)據(jù)按照年份可視化

基礎(chǔ)數(shù)據(jù)可視化部分除了上文所提到的按照城市可視化和按照指標(biāo)可視化之外，還提供了按照年份可視化，展示同一年份不同城市不同指標(biāo)的物流指標(biāo)數(shù)據(jù)。與前兩部分不同的是，由于是同一年份的物流指標(biāo)數(shù)據(jù)做比較，這一部分取消了折線(xiàn)圖，并分別提供了以指標(biāo)為橫軸和以城市為橫軸的柱狀圖以及以指標(biāo)為一圈和以城市為一圈的餅狀圖，如圖9、圖10所示。

4.5 綜合數(shù)據(jù)可視化

在該模塊中，用戶(hù)同樣可以分別按指標(biāo)、按城市、按年份將目標(biāo)綜合指標(biāo)可視化，提供了不同城市不同年份不同指標(biāo)之間的對(duì)比、發(fā)展趨勢(shì)、占比等。

由于計(jì)算綜合指標(biāo)的公式中某些數(shù)據(jù)指標(biāo)無(wú)法直接從基礎(chǔ)數(shù)據(jù)庫(kù)中獲取，因此在該模塊中提供了相關(guān)計(jì)算頁(yè)面，允許用戶(hù)自己輸入相關(guān)參數(shù)進(jìn)行運(yùn)算，并將對(duì)應(yīng)的綜合指標(biāo)結(jié)果可視化，如圖11所示。

5 總結(jié)

本文實(shí)現(xiàn)了基于ECharts的動(dòng)態(tài)數(shù)據(jù)展示功能，解決了海量鐵路物流數(shù)據(jù)文本化展示不夠直觀清晰導(dǎo)致用戶(hù)難以有效挖掘核心信息的問(wèn)題，節(jié)省了用戶(hù)的時(shí)間，提高了對(duì)鐵路物流信息的利用效率。鐵路物流數(shù)據(jù)可視化將鐵路物流數(shù)據(jù)分析與智能平臺(tái)Web項(xiàng)目中的數(shù)十個(gè)基礎(chǔ)數(shù)據(jù)指標(biāo)以及在此基礎(chǔ)上衍生出來(lái)的綜合數(shù)據(jù)指標(biāo)根據(jù)用戶(hù)要求動(dòng)態(tài)展示出來(lái)，并且允許用戶(hù)無(wú)需插件、直接通過(guò)網(wǎng)頁(yè)的動(dòng)態(tài)響應(yīng)式渲染數(shù)據(jù)視圖并與之交互?；贓Charts實(shí)現(xiàn)了柱狀圖、折線(xiàn)圖、餅狀圖三大圖表，在每種圖表中都用不同顏色來(lái)對(duì)不同的指標(biāo)進(jìn)行區(qū)分，有助于用戶(hù)更加直觀地對(duì)數(shù)據(jù)進(jìn)行查看、對(duì)比、分析。從柱狀圖中可以直觀地看出不同指標(biāo)的數(shù)據(jù)量以及它們的差異，從折線(xiàn)圖中可以看出不同指標(biāo)隨著時(shí)間的發(fā)展趨勢(shì)，從餅狀圖中可以看出不同指標(biāo)所占比例。

參考文獻(xiàn)：

[1] 劉長(zhǎng)娥.數(shù)據(jù)可視化技術(shù)在Web中的研究及應(yīng)用[J].電腦知識(shí)與技術(shù)，2017，13（18）：7-8.

[2] 潘玉春，胡劍鋒，朱玉付.WEB可視化技術(shù)在電網(wǎng)大數(shù)據(jù)場(chǎng)景下的應(yīng)用研究[J].電力大數(shù)據(jù)，2019，22（3）：8-12.

[3] ECharts官網(wǎng)[EB/OL].http：//www.echarts.baidu.com/.

[4] 冀瀟，李楊.采用ECharts可視化技術(shù)實(shí)現(xiàn)的數(shù)據(jù)體系監(jiān)控系統(tǒng)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2017，26（6）：72-76.

[5] 章銳，陳樹(shù)勇，劉道偉，等.基于ECharts的電網(wǎng)Web可視化研究及應(yīng)用[J].電測(cè)與儀表，2017，54（19）：59-66.

[6] Keim D，Qu H M，Ma K L.Big-data visualization[J].IEEE Computer Graphics and Applications，2013，33（4）：20-21.

[7] Perkel J M.Data visualization tools drive interactivity and reproducibility in online publishing[J].Nature，2018，554（7690）：133-134.

[8] Huang M L，Huang T H，Zhang X Y.A novel virtual node approach for interactive visual analytics of big datasets in parallel coordinates[J].Future Generation Computer Systems，2016，55：510-523.

[9] 宋佳慧，劉遠(yuǎn)剛，林琳，等.基于eCharts的動(dòng)態(tài)統(tǒng)計(jì)圖表繪制技術(shù)研究[J].電腦知識(shí)與技術(shù)，2017，13（12）：202-204.

[10] 王雄兵，田茂，范亮，等.基于ECharts光伏發(fā)電信息化管理平臺(tái)數(shù)據(jù)可視化效果的實(shí)現(xiàn)[J].物聯(lián)網(wǎng)技術(shù)，2017，7（1）：54-55，58.

[11] 崔蓬.ECharts在數(shù)據(jù)可視化中的應(yīng)用[J].軟件工程，2019，22（6）：42-46.

[12] 楊凱，王長(zhǎng)海.基于ECharts的交通養(yǎng)護(hù)大數(shù)據(jù)可視化效果實(shí)現(xiàn)方法[J].西部交通科技，2019（10）：148-151.

[13] 徐欣威.基于ECharts的科技統(tǒng)計(jì)數(shù)據(jù)可視化設(shè)計(jì)與實(shí)現(xiàn)[J].天津科技，2019，46（3）：66-70.

【通聯(lián)編輯：唐一東】