侯飛，李俊偉，張金城，劉顯峰，劉海全，徐燦，陳皓秋

（1.濟(jì)南軌道交通集團(tuán)建設(shè)投資有限公司，山東 濟(jì)南 250000；2.中車青島四方機(jī)車車輛股份有限公司，山東 青島 266111；3.南京康尼機(jī)電股份有限公司，江蘇 南京 210000）

0 引言

伴隨著整個(gè)軌道交通行業(yè)的飛速發(fā)展，鐵路交通的大提速，列車運(yùn)行的安全性、可靠性、舒適性越來越受到重視?？的峁窘⒌能壍儡囕v門系統(tǒng)故障預(yù)測(cè)和健康管理（PHM）系統(tǒng)就是為上述目標(biāo)的實(shí)現(xiàn)服務(wù)的。該系統(tǒng)是通過門控器內(nèi)置的傳感器，采集大量車門運(yùn)行數(shù)據(jù)，比如開關(guān)門電流、電壓、電機(jī)轉(zhuǎn)速等，通過大數(shù)據(jù)分析，專家系統(tǒng)診斷后，明確門系統(tǒng)亞健康與故障情況，實(shí)現(xiàn)車門狀態(tài)修。極大的減少了不必要的人工檢修成本，提高了檢修效率?？的峁灸壳癙HM系統(tǒng)采集數(shù)據(jù)的曲線主要為實(shí)時(shí)展示運(yùn)行曲線與故障狀態(tài)曲線，因此對(duì)于動(dòng)態(tài)圖表的繪制要求極高。

面對(duì)大量的數(shù)據(jù)，通過取點(diǎn)繪制曲線圖已經(jīng)不可取了，無法滿足代碼簡(jiǎn)潔性的要求[1-3]。利用開源的圖表可視化工具進(jìn)行圖表繪制、數(shù)據(jù)分析已經(jīng)成為了前端軟件設(shè)計(jì)的重要應(yīng)用技術(shù)。本文將研究圖表可視化工具在遠(yuǎn)程診斷項(xiàng)目中實(shí)際應(yīng)用。

1 圖表可視化工具選取

1.1 ECharts功能介紹

百度公司推出的ECharts，是一款利用JavaScript 來實(shí)現(xiàn)的開源可視化庫，其可在計(jì)算機(jī)設(shè)備和移動(dòng)設(shè)備上進(jìn)行流暢的運(yùn)行，并且兼容目前市面上的絕大多數(shù)瀏覽器（如Internet Explorer，F(xiàn)irefox，Chrome，Safari等），該可視化圖表控件，不僅支持折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖這樣常見的圖表種類，還支持地圖、熱力圖、關(guān)系圖、多維坐標(biāo)圖等各式特殊圖表，同時(shí)還支持圖與圖之間混合結(jié)構(gòu)搭建[4]。

ECharts的渲染方式適合圖表像素處理、動(dòng)態(tài)渲染以及大數(shù)據(jù)量圖表的繪制[5-6]。對(duì)于多種數(shù)據(jù)源無需轉(zhuǎn)換即可直接使用，并且在智能可移動(dòng)設(shè)備交互中進(jìn)行了細(xì)致的優(yōu)化。其優(yōu)點(diǎn)在于代碼量不大，且內(nèi)存占用率遠(yuǎn)比其他渲染模塊低得多，并且ECharts作為中文原生軟件，開源不收費(fèi)，文檔詳細(xì)，考慮到后續(xù)功能的可拓展性和易用性、性價(jià)比等特點(diǎn)。

1.2 Highchars功能介紹

Highcharts是由Highsoft AS公司開發(fā)的一款開源圖形庫，目前已在臉書、微軟等跨國(guó)企業(yè)應(yīng)有。它采用SVG （Scalable Vector Graphics，可縮放矢量圖形）進(jìn)行渲染和繪圖，該庫支持柱狀圖、折線圖、餅圖，不支持地圖、和弦圖、數(shù)據(jù)透視圖、大規(guī)模散點(diǎn)圖等特殊圖表。其優(yōu)點(diǎn)是基于矢量形狀繪圖，并運(yùn)用XML（Extensible Markup Language，可擴(kuò)展標(biāo)記語言）語言定義圖形的形狀，不管圖形如何縮放，均不會(huì)改變文本定義的形狀。利用SVG渲染繪制的圖形每一個(gè)都是獨(dú)立的一個(gè)元素，并且是DOM（Document Object Model，文檔對(duì)象模型）的一部分，因此可以通過CSS（Cascading Style Sheets，層疊樣式表）和JS（JavaScript，腳本語言）腳本進(jìn)行修改、刪除等操作，亦可對(duì)每一個(gè)圖像添加事件和行為[7-8]。但是該軟件需要付費(fèi)使用。

1.3 D3功能介紹

D3.js也是一個(gè)JavaScript庫，其根據(jù)數(shù)據(jù)處理文檔。D3通過使用HTML（Hyper Text Markup Language，超級(jí)文本標(biāo)記語言）、SVG和CSS使數(shù)據(jù)更加生動(dòng)，同時(shí)可以用于動(dòng)態(tài)圖表的展示。D3針對(duì)Web（World Wide Web，萬維網(wǎng)）標(biāo)準(zhǔn)的提供了現(xiàn)代瀏覽器的全部功能，而又不會(huì)將自己束縛于專有框架，結(jié)合了強(qiáng)大的可視化組件和數(shù)據(jù)驅(qū)動(dòng)的DOM操作方法。其允許將任意數(shù)據(jù)綁定到文檔對(duì)象模型，然后將數(shù)據(jù)驅(qū)動(dòng)的轉(zhuǎn)換應(yīng)用于文檔。但是由于D3始終操作的是真實(shí)DOM，因此每次更新數(shù)據(jù)變動(dòng)所對(duì)應(yīng)的DOM，就會(huì)觸發(fā)瀏覽器重繪和重排，數(shù)據(jù)計(jì)算量巨大，性能不如其他動(dòng)態(tài)圖表實(shí)現(xiàn)工具。尤其是在進(jìn)行交互效果展示時(shí)，大量SVG元素進(jìn)入動(dòng)畫隊(duì)列，頁面會(huì)出現(xiàn)卡頓的現(xiàn)象，并且因?yàn)榭蚣艿撵`活性導(dǎo)致用戶操作更加困難。

因此綜合考慮，遠(yuǎn)程診斷項(xiàng)目選取了利用開源的百度ECharts工具對(duì)項(xiàng)目展示頁面動(dòng)態(tài)圖表進(jìn)行繪制的方案。

2 動(dòng)態(tài)圖表繪制

2.1 ECharts軟件架構(gòu)

ECharts作為一款純Javascript的圖表庫，支持目前大多數(shù)瀏覽器，其軟件底層依賴輕量級(jí)的Canvas類庫ZRender，提供了直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。該組件支持折線圖、柱狀圖、散點(diǎn)圖、K線圖、餅圖、雷達(dá)圖、和弦圖、地圖、儀表盤、漏斗圖、事件河流圖、力導(dǎo)向布局圖、等12類圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。其總體架構(gòu)如下圖1所示。

圖1 ECharts軟件總體架構(gòu)

ECharts組件的結(jié)構(gòu)模型是基于MVC（Model-View-Controller，模型視圖控制器）架構(gòu)，該架構(gòu)模型是將業(yè)務(wù)邏輯、數(shù)據(jù)與界面顯示相分離，然后組織代碼，將眾多的業(yè)務(wù)邏輯聚集到一個(gè)部件上，在需要改進(jìn)和個(gè)性化定制界面及用戶交互的同時(shí)，不需要重新編寫業(yè)務(wù)邏輯，從而達(dá)到減少編碼的時(shí)間。該結(jié)構(gòu)將一個(gè)應(yīng)用程序的輸入、處理和輸出的流程劃分為Model、View和Controller 3個(gè)部分，請(qǐng)求處理方式如圖2[9]。

圖2 ECharts請(qǐng)求處理方式

Storage（Model）：模型層，實(shí)現(xiàn)圖形數(shù)據(jù)的增刪改查（CURD）管理。

Painter（View）：視圖層，實(shí)現(xiàn)canvas元素的生命周期管理，即視圖渲染、更新控制、繪圖。

Handler（Controller）：控制層，事件交互處理，實(shí)現(xiàn)完整的DOM事件模擬封裝。

Storage是一個(gè)類似數(shù)據(jù)的倉庫，提供各種數(shù)據(jù)的讀、寫、改、刪等操作。Painter持有了Storage對(duì)象，視圖層與模型層存在read關(guān)系，即Painter需要讀取Storage中的數(shù)據(jù)進(jìn)行繪圖。Handler則持有了Storage對(duì)象和Painter對(duì)象，控制層與模型層存在CURD關(guān)系，即Handler通過訪問Storage對(duì)象提供的數(shù)據(jù)增刪改查操作實(shí)現(xiàn)事件交互處理所需的數(shù)據(jù)部分；而控制層與視圖層存在call關(guān)系，即Handler通過訪問Painter對(duì)象提供的視圖操作實(shí)現(xiàn)事件交互處理的視圖部分。MVC結(jié)構(gòu)模型層次分明、分工明確、易維護(hù)和重用，極大減少了客戶端的工作，將工作量轉(zhuǎn)移到服務(wù)器。

2.2 Echarts參數(shù)設(shè)置

軟件設(shè)計(jì)人員通過Ajax函數(shù)來調(diào)用后臺(tái)的模型及控制層，完成需求傳遞與結(jié)果回傳。通過option值的設(shè)定即可以控制數(shù)據(jù)展示的方式、數(shù)據(jù)值域和其他相關(guān)的控制細(xì)節(jié)。

常見的option參數(shù)如下表1。

表1 常見option參數(shù)

2.3 構(gòu)建過程

本文演示軟件采用B/S（Browser/Server，瀏覽器/服務(wù)器模式）結(jié)構(gòu)，數(shù)據(jù)庫使用MySQL，Web容器為Tomcat，后臺(tái)框架為Struct 和Jdbc，前端可視化工具使用了ECharts V3版本。

Echarts的構(gòu)建可以通過便簽的方式引入到頁面中。方式如下：

頁面中在繪圖前需要準(zhǔn)備好DOM容器，同時(shí)需要規(guī)定好大小。方式如下：

數(shù)據(jù)展示時(shí)，核心配置主要通過option參數(shù)完成，以折線圖為例。

var option = {

backgroundColor:”#fff”,

xAxis: {

type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’,

‘Fri’, ‘Sat’, ‘Sun’],

name:”日期”,

nameTextStyle:{fontSize:20},

axisLabel:{fontSize: 20},

},

yAxis: {

type: ‘value’，

name:”數(shù)量/個(gè)”,

nameTextStyle:{fontSize:20},

axisLabel:{fontSize: 20},

},

series: [{

data: [120, 330, 520,400, 800, 600, 990],

type: ‘line’,

lineStyle:{color:”#000”},

}],

};

以上通過描點(diǎn)繪制了1周的某個(gè)數(shù)值的變化情況，如下圖3。

圖3 某數(shù)值一周變化情況

3 應(yīng)用

3.1 實(shí)施步驟

遠(yuǎn)程診斷項(xiàng)目在實(shí)時(shí)監(jiān)測(cè)界面需要根據(jù)每次開關(guān)門的數(shù)據(jù)信息參數(shù)繪制6張單一坐標(biāo)系的曲線圖，以及2張可選顯示參數(shù)的I/O信號(hào)圖，并且部分圖表中需要繪制多條曲線，項(xiàng)目通過后臺(tái)傳輸?shù)臄?shù)據(jù)在開關(guān)門時(shí)實(shí)時(shí)繪制曲線。

具體實(shí)現(xiàn)流程如下圖4：

圖4 實(shí)現(xiàn)流程

首先在集成展示頁面的頭文件中引入了Echarts3，同時(shí)建立了div用于存放圖表，div的變量名設(shè)置為“dZsGraph”，而后在項(xiàng)目對(duì)應(yīng)的JS文件中，引入圖表“dZsChart”，并進(jìn)行圖表初始化。其后設(shè)置圖表繪制函數(shù)定義為“setGraphData”，項(xiàng)目使用的參數(shù)有圖表類型（series）、x坐標(biāo)軸（xAxis）、y坐標(biāo)軸（yAxis）、圖表標(biāo)題（title）、提示框組件（tooltip）、圖例組件（legend）、工具欄（toolbox）、拖拽用手柄（calculable）、坐標(biāo)系內(nèi)繪制網(wǎng)格（grid）、懸浮時(shí)間（toolipTime）、圖例數(shù)組（legendData）、是否顯示圖例（legendDisplay）、x坐標(biāo)軸名稱（xAxisName）、曲線顏色值（colorData）、曲線寬度（widthData）等。這些對(duì)象數(shù)據(jù)通過門控器子板采集，并傳輸至服務(wù)器。而前端瀏覽器向服務(wù)器發(fā)出請(qǐng)求，請(qǐng)求信息包含：請(qǐng)求方法URI協(xié)議/版本、請(qǐng)求頭、請(qǐng)求正文。服務(wù)器后臺(tái)進(jìn)行數(shù)據(jù)處理后，以Json格式響應(yīng)給前端，前端通過Echarts3組件繪制視圖展示在頁面上。

服務(wù)器后臺(tái)傳輸給前端的數(shù)據(jù)格式為Json格式。結(jié)構(gòu)示例如下：

[{

“門號(hào)”: “數(shù)值”,

“曲線1”: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

“曲線2”: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

“曲線3”: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

}]

雖然多張圖表之間的坐標(biāo)軸名稱不一致，但是其相互之間是有對(duì)照關(guān)系得到，因此需要對(duì)多個(gè)圖表之間需要進(jìn)行聯(lián)動(dòng)展示，這樣可以方便應(yīng)用人員直觀的分析圖表含義。利用connect和exchng將各圖表之間進(jìn)行關(guān)聯(lián)與取消關(guān)聯(lián)，實(shí)現(xiàn)方法如下：

echartsFun.connect( [dmpChart,dlsChart, dfChart, zsChart, zjChart, zjuChart ]);

echartsFun.exchng(“.exch-connect”, [ dmpChart, dlsChart, ddfChart, zsChart, zjChart, zjuChart ]);

圖表里面最常使用的功能就是圖表的放大與縮小，該模塊是在toolbox組件中進(jìn)行添加。toolbox組件中，共有導(dǎo)出圖片、數(shù)據(jù)視圖、動(dòng)態(tài)類型切換、數(shù)據(jù)區(qū)域縮放、重置5個(gè)模塊，本項(xiàng)目使用了數(shù)據(jù)區(qū)域縮放。在組件中將show值設(shè)置為ture，以顯示功能模塊，將工具欄圖標(biāo)大小通過itemSize值設(shè)置，再將其子模塊dataZoom的show值設(shè)置為ture，以顯示數(shù)據(jù)區(qū)域縮放模塊。根據(jù)項(xiàng)目曲線情況，確定縮放方向，本項(xiàng)目確定為x軸縮放，y軸不變，設(shè)置yAxisIndex值為false。

3.2 系統(tǒng)測(cè)試

展示如下圖5所示，網(wǎng)頁端圖表展示響應(yīng)時(shí)間基本在10ms左右，圖表顯示正常，滿足客戶要求。

圖5 系統(tǒng)展示圖

4 結(jié)論

本文運(yùn)用了Echarts組件繪制地鐵開關(guān)門遠(yuǎn)程診斷數(shù)據(jù)結(jié)果，該組件代碼量不大，響應(yīng)速度快，數(shù)據(jù)實(shí)時(shí)更新流暢、無卡頓。模塊化集成度高，使得軟件工程師在后期頁面優(yōu)化時(shí)更容易實(shí)現(xiàn)客戶需求。同時(shí)，動(dòng)態(tài)曲線圖表讓客戶可以更直觀的了解開關(guān)門過程中參數(shù)的變化情況，更有利于客戶在獲取集成展示頁面時(shí)有更好的用戶體驗(yàn)感。提高了實(shí)驗(yàn)人員以及檢修人員的工作效率，節(jié)省了大量人力資源。