動態圖表技術在軌道交通車輛門PHM系統中的應用

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

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

0 引言

伴隨著整個軌道交通行業的飛速發展，鐵路交通的大提速，列車運行的安全性、可靠性、舒適性越來越受到重視。康尼公司建立的軌道車輛門系統故障預測和健康管理（PHM）系統就是為上述目標的實現服務的。該系統是通過門控器內置的傳感器，采集大量車門運行數據，比如開關門電流、電壓、電機轉速等，通過大數據分析，專家系統診斷后，明確門系統亞健康與故障情況，實現車門狀態修。極大的減少了不必要的人工檢修成本，提高了檢修效率。康尼公司目前PHM系統采集數據的曲線主要為實時展示運行曲線與故障狀態曲線，因此對于動態圖表的繪制要求極高。

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

1 圖表可視化工具選取

1.1 ECharts功能介紹

百度公司推出的ECharts，是一款利用JavaScript 來實現的開源可視化庫，其可在計算機設備和移動設備上進行流暢的運行，并且兼容目前市面上的絕大多數瀏覽器（如Internet Explorer，Firefox，Chrome，Safari等），該可視化圖表控件，不僅支持折線圖、柱狀圖、散點圖、餅圖、K線圖這樣常見的圖表種類，還支持地圖、熱力圖、關系圖、多維坐標圖等各式特殊圖表，同時還支持圖與圖之間混合結構搭建[4]。

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

1.2 Highchars功能介紹

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

1.3 D3功能介紹

D3.js也是一個JavaScript庫，其根據數據處理文檔。D3通過使用HTML（Hyper Text Markup Language，超級文本標記語言）、SVG和CSS使數據更加生動，同時可以用于動態圖表的展示。D3針對Web（World Wide Web，萬維網）標準的提供了現代瀏覽器的全部功能，而又不會將自己束縛于專有框架，結合了強大的可視化組件和數據驅動的DOM操作方法。其允許將任意數據綁定到文檔對象模型，然后將數據驅動的轉換應用于文檔。但是由于D3始終操作的是真實DOM，因此每次更新數據變動所對應的DOM，就會觸發瀏覽器重繪和重排，數據計算量巨大，性能不如其他動態圖表實現工具。尤其是在進行交互效果展示時，大量SVG元素進入動畫隊列，頁面會出現卡頓的現象，并且因為框架的靈活性導致用戶操作更加困難。

因此綜合考慮，遠程診斷項目選取了利用開源的百度ECharts工具對項目展示頁面動態圖表進行繪制的方案。

2 動態圖表繪制

2.1 ECharts軟件架構

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

圖1 ECharts軟件總體架構

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

圖2 ECharts請求處理方式

Storage（Model）：模型層，實現圖形數據的增刪改查（CURD）管理。

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

Handler（Controller）：控制層，事件交互處理，實現完整的DOM事件模擬封裝。

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

2.2 Echarts參數設置

軟件設計人員通過Ajax函數來調用后臺的模型及控制層，完成需求傳遞與結果回傳。通過option值的設定即可以控制數據展示的方式、數據值域和其他相關的控制細節。

常見的option參數如下表1。

表1 常見option參數

2.3 構建過程

本文演示軟件采用B/S（Browser/Server，瀏覽器/服務器模式）結構，數據庫使用MySQL，Web容器為Tomcat，后臺框架為Struct 和Jdbc，前端可視化工具使用了ECharts V3版本。

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

頁面中在繪圖前需要準備好DOM容器，同時需要規定好大小。方式如下：

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

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:”數量/個”,

nameTextStyle:{fontSize:20},

axisLabel:{fontSize: 20},

},

series: [{

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

type: ‘line’,

lineStyle:{color:”#000”},

}],

};

以上通過描點繪制了1周的某個數值的變化情況，如下圖3。

圖3 某數值一周變化情況

3 應用

3.1 實施步驟

遠程診斷項目在實時監測界面需要根據每次開關門的數據信息參數繪制6張單一坐標系的曲線圖，以及2張可選顯示參數的I/O信號圖，并且部分圖表中需要繪制多條曲線，項目通過后臺傳輸的數據在開關門時實時繪制曲線。

具體實現流程如下圖4：

圖4 實現流程

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

服務器后臺傳輸給前端的數據格式為Json格式。結構示例如下：

[{

“門號”: “數值”,

“曲線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],

}]

雖然多張圖表之間的坐標軸名稱不一致，但是其相互之間是有對照關系得到，因此需要對多個圖表之間需要進行聯動展示，這樣可以方便應用人員直觀的分析圖表含義。利用connect和exchng將各圖表之間進行關聯與取消關聯，實現方法如下：

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

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

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

3.2 系統測試

展示如下圖5所示，網頁端圖表展示響應時間基本在10ms左右，圖表顯示正常，滿足客戶要求。

圖5 系統展示圖

4 結論

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