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

楊凱 王長海

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

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

中圖分類號：U491 文獻標識碼：A D00：10.13282/j.cnki.wccst.2019.10.041

文章編號：1673-4874（2019）10-0148-04

0引言

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

1可視化技術簡介

1.1d3

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

1.2HighchartS

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

1.3 gChart

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

1.4 ECharts

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

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

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

（3）組合圖表：Echarts支持對圖表進行組合，形成新的圖表。例如在地圖上繪制散點圖、熱力圖及基于極坐標的折線圖等。

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

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

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

2.1平臺簡介

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

2.2 平臺框架

交通養(yǎng)護大數(shù)據(jù)平臺總體結構從下到上可以分為數(shù)據(jù)層、數(shù)據(jù)訪問層、功能層、服務層和界面層。見圖1。

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

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

功能層是提供界面使用的服務的功能集合或應用集合。

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

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

3可視化實現(xiàn)

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

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

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

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

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

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

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

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

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

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

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

3.2 ECharts實現(xiàn)

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

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

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

3.3 展示效果

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

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

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

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

4 結語

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

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