基于Echarts的交通養(yǎng)護(hù)大數(shù)據(jù)可視化效果實(shí)現(xiàn)方法

楊凱 王長(zhǎng)海

摘要：文章對(duì)建設(shè)交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)過(guò)程中的可視化技術(shù)進(jìn)行了研究，通過(guò)對(duì)比目前市場(chǎng)上流行的可視化技術(shù)，最終選擇ECharts對(duì)大數(shù)據(jù)平臺(tái)的數(shù)據(jù)進(jìn)行可視化實(shí)驗(yàn)分析。結(jié)果表明，利用ECharts可以很好地滿足交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)的可視化需求。

關(guān)鍵詞：養(yǎng)護(hù)大數(shù)據(jù);可視化;ECharts

中圖分類號(hào)：U491 文獻(xiàn)標(biāo)識(shí)碼：A D00：10.13282/j.cnki.wccst.2019.10.041

文章編號(hào)：1673-4874（2019）10-0148-04

0引言

改革開(kāi)放以來(lái)，我國(guó)的公路建設(shè)發(fā)展迅速。公路里程從改革初期不到80萬(wàn)km發(fā)展到“十二五”時(shí)期的450萬(wàn)km，公路網(wǎng)四通八達(dá)，縱橫交錯(cuò)。與此同時(shí)，伴隨著交通量的迅速增長(zhǎng)，公路路面、橋梁、涵洞等不可避免地出現(xiàn)了不同程度、不同類型的病害，如路面裂縫、橋梁伸縮縫、橋頭跳車、邊坡崩塌、防護(hù)設(shè)施缺損等，這些病害嚴(yán)重危害了車輛和人員的安全。因此，公路養(yǎng)護(hù)里程數(shù)逐年增加。可以看出，我國(guó)的公路建設(shè)已經(jīng)從大規(guī)模建設(shè)向大規(guī)模養(yǎng)護(hù)過(guò)渡。基于此，廣西交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)應(yīng)運(yùn)而生。

1可視化技術(shù)簡(jiǎn)介

1.1d3

d3是一款基于svg繪圖的JavaScript庫(kù)，它允許開(kāi)發(fā)者將數(shù)據(jù)綁定在dom節(jié)點(diǎn)上，利用d3將一個(gè)數(shù)組轉(zhuǎn)化為表格，也可以利用d3將數(shù)組轉(zhuǎn)化為不同類型的圖表。d3通過(guò)svg添加圖形并對(duì)圖形屬性進(jìn)行配置從而實(shí)現(xiàn)可視化的效果，采用svg繪圖使得它不能輕易地從一個(gè)圖表轉(zhuǎn)換到另一個(gè)圖表。另外，對(duì)于圖表的屬性配置也需要通過(guò)改變代碼來(lái)實(shí)現(xiàn)。

1.2HighchartS

Highcharts是用Javascript開(kāi)發(fā)的一款輕量級(jí)的、簡(jiǎn)潔的跨瀏覽器的報(bào)表庫(kù)，利用它可以很輕易地生成多種類型的圖表，包括常見(jiàn)的柱狀圖、散點(diǎn)圖、餅圖等以及一些特殊類型的圖表，如綜合圖、區(qū)域圖等。Highcharts的優(yōu)點(diǎn)在于它基于配置項(xiàng)來(lái)對(duì)圖表進(jìn)行操作，這使得它能夠輕易地變更圖表類型和圖表展現(xiàn)形式。

1.3 gChart

gchart是一款基于jQuery的插件，它封裝了Google的圖表API，因此利用gchart繪圖實(shí)際上是調(diào)用Google的API進(jìn)行圖表繪制。Gchart的使用方式和highcharts類似，通過(guò)對(duì)圖表的類型、寬高、數(shù)據(jù)、坐標(biāo)軸等屬性進(jìn)行配置，就可以實(shí)現(xiàn)不同類型圖表的展現(xiàn)。gchart的缺點(diǎn)在于它返回的是一個(gè)png格式的圖片，這使得用戶不能和圖表進(jìn)行交互。

1.4 ECharts

EChartS是由百度前端團(tuán)隊(duì)開(kāi)發(fā)出來(lái)的一款基于CORVOS實(shí)現(xiàn)的圖表庫(kù)，通過(guò)多種不同類型的圖表對(duì)數(shù)據(jù)進(jìn)行可視化，直觀地層示原始數(shù)據(jù)的特點(diǎn)和趨勢(shì)。另外，EChartS還提供了對(duì)大數(shù)據(jù)量下圖表繪制的支持。ECharts支持的圖表類型包括：

（1）基本圖表：EChartS可以實(shí)現(xiàn)常見(jiàn)的基本圖表的繪制，包括柱狀圖、散點(diǎn)圖、折線圖、餅狀圖、熱力圖、地圖等。

（2）特殊圖表：除了常見(jiàn)的圖表之外，EChartS還支持一些特殊圖表的可視化，例如雷達(dá)圖、K線圖、箱線圖、關(guān)系圖、樹(shù)狀圖、矩形數(shù)圖、平行坐標(biāo)、桑基圖、漏斗圖、儀表盤、象形柱圖、主題河流圖、曰力圖等。

（3）組合圖表：Echarts支持對(duì)圖表進(jìn)行組合，形成新的圖表。例如在地圖上繪制散點(diǎn)圖、熱力圖及基于極坐標(biāo)的折線圖等。

（4）自定義圖表：利用ECharts提供的API繪制自定義圖表，通過(guò)自定義的圖表渲染方式來(lái)實(shí)現(xiàn)想要達(dá)到的效果。

Echarts提供了基于option的圖表配置方式，使開(kāi)發(fā)者可以在不修改代碼的情況下對(duì)圖表的各種屬性進(jìn)行修改，也可以便捷地實(shí)現(xiàn)從一種類型的圖表到另一種類型的圖表的切換，極大地方便了開(kāi)發(fā)者對(duì)數(shù)據(jù)進(jìn)行直觀、形象的可視化。

2 交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)

2.1平臺(tái)簡(jiǎn)介

交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)以GIS地圖和路網(wǎng)數(shù)據(jù)為基礎(chǔ)，在同一時(shí)空基準(zhǔn)下建立交通資產(chǎn)數(shù)據(jù)庫(kù)，關(guān)聯(lián)資產(chǎn)的空間和屬性數(shù)據(jù)，將公路、橋梁、隧道、涵洞、沿線設(shè)施、綠化等資產(chǎn)進(jìn)行從宏觀到微觀、從歷史到未來(lái)的多角度、全方位、深層次的管理。

2.2 平臺(tái)框架

交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)總體結(jié)構(gòu)從下到上可以分為數(shù)據(jù)層、數(shù)據(jù)訪問(wèn)層、功能層、服務(wù)層和界面層。見(jiàn)圖1。

數(shù)據(jù)層是對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)管理。平臺(tái)數(shù)據(jù)層存儲(chǔ)的數(shù)據(jù)包括GIS數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)。GIS數(shù)據(jù)包括GIS地圖和圖層數(shù)據(jù);業(yè)務(wù)數(shù)據(jù)包括路網(wǎng)數(shù)據(jù)、資產(chǎn)數(shù)據(jù)、病害數(shù)據(jù)和養(yǎng)護(hù)數(shù)據(jù)等。

數(shù)據(jù)訪問(wèn)層通過(guò)訪問(wèn)數(shù)據(jù)庫(kù)對(duì)數(shù)據(jù)層的GIS數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)進(jìn)行操作，從而為功能層提供數(shù)據(jù)服務(wù)。

功能層是提供界面使用的服務(wù)的功能集合或應(yīng)用集合。

服務(wù)層是將應(yīng)用功能集合發(fā)布成服務(wù)，為界面層提供使用的服務(wù)。

界面層是實(shí)現(xiàn)用戶與系統(tǒng)的直觀交互操作，把客戶端從底層業(yè)務(wù)邏輯的變化中分離出來(lái)。

3可視化實(shí)現(xiàn)

3.1 數(shù)據(jù)流動(dòng)模式

交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)管理的數(shù)據(jù)包括路網(wǎng)GIS數(shù)據(jù)、資產(chǎn)數(shù)據(jù)、路況數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)。其中路網(wǎng)GIS數(shù)據(jù)包括路線定位、區(qū)間定位、路段定位、資產(chǎn)定位、養(yǎng)護(hù)段定位和病害定位等數(shù)據(jù)。資產(chǎn)數(shù)據(jù)包括資產(chǎn)歷史、養(yǎng)護(hù)記錄、實(shí)時(shí)數(shù)據(jù)、病害數(shù)據(jù)和檔案信息等。路況數(shù)據(jù)包括檢測(cè)數(shù)據(jù)、評(píng)定信息、分析報(bào)表等。業(yè)務(wù)數(shù)據(jù)包括養(yǎng)護(hù)信息和決策信息等。

可以看出，本平臺(tái)涉及到的數(shù)據(jù)種類繁多：按照數(shù)據(jù)結(jié)構(gòu)可以分為結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù);按照時(shí)間序列可以分為實(shí)時(shí)數(shù)據(jù)和非實(shí)時(shí)數(shù)據(jù);按照數(shù)據(jù)是否被處理可以分為原始數(shù)據(jù)和非原始數(shù)據(jù)。要將各種不同類型的數(shù)據(jù)通過(guò)本平臺(tái)展示給用戶，僅靠傳統(tǒng)的數(shù)據(jù)表現(xiàn)方式遠(yuǎn)不能滿足需求，因此本文利用瀏覽器端的可視化技術(shù)ECharts來(lái)完成數(shù)據(jù)的可視化工作。

廣西交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)涉及到的數(shù)據(jù)類型多樣，考慮到原始數(shù)據(jù)的數(shù)據(jù)量較大，本文利用Echarts技術(shù)對(duì)原始數(shù)據(jù)進(jìn)行展現(xiàn)，其他類型的數(shù)據(jù)展現(xiàn)方式和原始數(shù)據(jù)的展現(xiàn)方式類似，本文不再——贅述。

本平臺(tái)的數(shù)據(jù)展示流程為：

（1）數(shù)據(jù)訪問(wèn)層調(diào)用接口從數(shù)據(jù)層取出數(shù)據(jù);

（2）數(shù)據(jù)訪問(wèn)層將數(shù)據(jù)傳遞到功能層;

（3）功能層將數(shù)據(jù)傳遞到服務(wù)層;

（4）服務(wù)層將數(shù)據(jù)傳遞到前端展示。

其中，數(shù)據(jù)從數(shù)據(jù)訪問(wèn)層流動(dòng)到前端的格式為JSON，前端頁(yè)面接收J(rèn)SON數(shù)據(jù)然后利用ECharts進(jìn)行數(shù)據(jù)可視化操作。數(shù)據(jù)展示流程如圖2所示。

本文以原始數(shù)據(jù)中的公路平整度數(shù)據(jù)為例，對(duì)數(shù)據(jù)進(jìn)行可視化。平整度數(shù)據(jù)在數(shù)據(jù)層是以數(shù)據(jù)庫(kù)表的形式存在，如表1所示。數(shù)據(jù)在各層之間以JSON的格式流動(dòng)，數(shù)據(jù)展現(xiàn)形式如圖3所示。

3.2 ECharts實(shí)現(xiàn)

本文利用ECharts來(lái)對(duì)原始數(shù)據(jù)中的平整度數(shù)據(jù)進(jìn)行可視化，部分關(guān)鍵代碼如圖4和圖5所示。

JSON數(shù)據(jù)的原格式如圖3所示。圖4中代碼對(duì)JSON數(shù)據(jù)進(jìn)行處理，從數(shù)據(jù)中提取出ECharts所需的圖表配置項(xiàng)。圖中res_X存儲(chǔ)X軸的doto值，res_A存儲(chǔ)代表平整度折線圖的dota值，res_B存儲(chǔ)平整度國(guó)家標(biāo)準(zhǔn)折線圖的data值，res_C存儲(chǔ)平整度地區(qū)標(biāo)準(zhǔn)折線圖的data值。

在圖5中，series系列的三個(gè)數(shù)組分別表示代表平整度折線圖、平整度國(guó)家標(biāo)準(zhǔn)折線圖、平整度地區(qū)標(biāo)準(zhǔn)折線圖的圖表配置項(xiàng)。另外，dataZoom組件用來(lái)對(duì)X軸進(jìn)行縮放和平移，使得用戶可以關(guān)注數(shù)據(jù)整體展現(xiàn)形式或者關(guān)注某些特定的數(shù)據(jù)信息，從而為大量數(shù)據(jù)的展現(xiàn)提供支持。

3.3 展示效果

利用ECharts進(jìn)行數(shù)據(jù)可視化的展示效果如圖6所示。

圖6是調(diào)用ECharts相關(guān)配置項(xiàng)畫出的折線圖，其中橫坐標(biāo)表示樁號(hào)，縱坐標(biāo)表示平整度的指標(biāo)值。圖中包含三個(gè)折線圖，分別為代表平整度折線圖、國(guó)家標(biāo)準(zhǔn)折線圖、地區(qū)標(biāo)準(zhǔn)折線圖，每個(gè)折線圖都包含5000個(gè)數(shù)據(jù)點(diǎn)。利用Echarts可以自由選擇圖例和對(duì)應(yīng)折線圖的顯示和隱藏，使得用戶可以重點(diǎn)關(guān)注自己想看的折線圖。

另外，圖中的橫坐標(biāo)還添加了滾動(dòng)條功能。目前橫坐標(biāo)的范圍是0-1000，樁號(hào)的最大值為100000，用戶可以通過(guò)滾動(dòng)條的拖動(dòng)和平移來(lái)查看其它范圍內(nèi)樁號(hào)的數(shù)據(jù)信息，也可以通過(guò)選擇滾動(dòng)條的start和end屬性來(lái)查看特定樁號(hào)范圍內(nèi)的數(shù)據(jù)信息。可以看出，利用ECharts的滾動(dòng)條功能可以很好地為大數(shù)據(jù)展示分析提供支持。

對(duì)比表1、圖3、圖6可以看出，平整度原始數(shù)據(jù)以數(shù)據(jù)庫(kù)表的形式存儲(chǔ)在數(shù)據(jù)庫(kù)中，在各層之間以JSON的形式流動(dòng)，在展示層以圖標(biāo)的方式進(jìn)行展示。顯而易見(jiàn)的是，利用ECharts技術(shù)對(duì)原始數(shù)據(jù)進(jìn)行可視化展示，可以很形象、直觀地層示數(shù)據(jù)的特點(diǎn)和趨勢(shì)以及數(shù)據(jù)之間的關(guān)聯(lián)，符合本平臺(tái)對(duì)于可視化技術(shù)的要求。

4 結(jié)語(yǔ)

本文通過(guò)對(duì)目前常見(jiàn)的可視化技術(shù)進(jìn)行對(duì)比分析，選擇了ECharts作為廣西交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)的前端可視化技術(shù)，并且利用ECharts對(duì)原始數(shù)據(jù)進(jìn)行了圖表展現(xiàn)。

由展示結(jié)果可以看出，利用ECharts技術(shù)實(shí)現(xiàn)數(shù)據(jù)可視化，可以對(duì)數(shù)據(jù)進(jìn)行更加形象、直觀的展現(xiàn)。在數(shù)據(jù)量較大的情況下，ECharts也能通過(guò)坐標(biāo)軸的縮放和平移來(lái)輔助數(shù)據(jù)可視化，很好地滿足了廣西交通養(yǎng)護(hù)大數(shù)據(jù)平臺(tái)對(duì)于數(shù)據(jù)可視化的需求。