基于ECharts-X的安全事故數據三維可視化系統

劉志遠 楊 琭 閻光偉

基于ECharts-X的安全事故數據三維可視化系統

劉志遠 楊 琭 閻光偉

我國安全生產事故頻發，安全生產環境不容樂觀。本文以建設安全事故數據三維可視化分析展示平臺為目標，結合webGL相關技術，利用百度ECharts-X組件，以WebStorm 10.0為開發平臺，設計并實現了基于瀏覽器的安全事故數據三維可視化分析展示系統。該系統分析數據結果清晰、直觀，可以為預防安全生產事故提供決策依據。

我國的安全生產事故發生率和死亡人數長期位居世界首位，安全生產形勢十分嚴峻。雖然積累了大量的安全生產事故數據，但是仍然缺乏對基礎數據的整理和分析。在引入計算機技術以后，雖然減輕了人工壓力，但是計算機只被用作信息錄入的手段，或者在此基礎上提供簡單的查詢和統計。本系統旨在搜集安全事故信息的基礎上，提取出有用信息，并進行分析統計給出結果，結合webGL相關技術，利用百度ECharts-X組件，實現基于瀏覽器的三維可視化展示，從而將數據信息變得更加清晰、直觀，對比更加明顯，能夠較好的為預防安全生產事故提供基礎性決策依據。

關鍵技術介紹

本系統采用百度ECharts-X組件進行三維數據展示，該組件是基于ECharts的擴展。ECharts是百度前端數據可視化團隊推出的開源項目，已經得到商業應用。該組件基于html5 Canvas，是一個由Javascript編寫的圖表庫，能夠提供高度可定制化的可視化圖表。ECharts-X是 ECharts 團隊推出的全新 3D 可視化庫，它是基于 ECharts 的擴展，底層深度整合了 WebGL 庫QTEK和 Canvas2D 庫ZRender。

利用ECharts-X組件，使得本系統能夠具備如下特性

（1）支持與二維圖表進行整合。ECharts-X作為ECharts的擴展，能夠與ECharts中的柱狀圖、餅圖、折線圖等圖表進行組合，在展示三維數據的同時，也能夠結合不同的二維圖表，展示出數據的變化趨勢，更有利用安全事故數據的分析。

（2）支持3D大規模標注。本系統中的基礎數據超過13000條，得益于ECharts-X中的標注效果（markpoint）和webGL的強大能力，使得本系統加載幾萬條數據進行標注也能進行流暢的交互。同時對于數據的三維展示，ECharts-X特有的標柱方式，可以為要展示的數據在三維空間中拓展出高度緯度，以提供更加豐富的數據信息。

（3）支持平面地圖模式。當觀察數據區域較小時，若仍局限在世界地圖進行查看，將造成查看視角過窄，影響使用體驗，采用平面地圖模式，用戶可以選擇更加具體的國家和地區，使查看視角一直保持在合適的大小，能夠更加關注數據本身的變化。

系統設計

系統體系結構

整個系統采用分層結構，分別為表示層、事務邏輯層和數據存儲層，如圖1所示。

表示層主要功能包括安全事故數據的查詢管理和事故數據三維展示。表示層是用戶與系統交互的入口，用戶通過表示層可以完成對數據篩選、選擇不同的模型對數據進行展示的邏輯操作，利用百度ECharts-X組件，表示層完成對數據的加載和模型的渲染。

事務邏輯層由Web服務器和應用邏輯處理模塊組成。Web服務器負責接收從瀏覽器傳遞的用戶請求，同時將該請求交予應用邏輯處理模塊，應用邏輯處理模塊調用數據存儲層的數據進行數據處理，并將處理后的數據通過Web服務器返回給表示層。應用邏輯處理模塊的功能包括根據用戶篩選條件進行數據查詢處理相關操作、根據用戶添加修改的信息進行數據添加更新操作、對基礎數據進行分析整合等其他相關邏輯操作。

數據存儲層用于存儲和管理安全事故原始數據，通過數據庫管理系統對數據進行高效的存儲、訪問、索引以及維護，為整個系統提供穩定的數據存儲支持。

圖1 三維可視化系統體系結構

表1 安全事故數據存儲結構

系統基礎數據的組織

在整個系統體系結構中，系統需要的基礎數據通過數據存儲層進行管理。本系統采用關系型數據庫MySQL進行數據存儲和管理，數據來源為國家安全生產監督管理總局網站上收集得到2002到2011這10年間國內發生的安全事故數據，基礎數據在數據庫中的存儲結構如表1所示。

系統數據流圖

系統中事故數據處理流程包含基礎數據的管理分析、數據模型的確定和瀏覽器三維模型的展示等部分，其數據流圖如圖2所示。

系統功能介紹及實現

系統功能分為事故數據管理部分和數據三維展示部分，主要功能結構圖如圖3所示。

數據管理

事故數據管理包含事故基礎數據管理和地理數據管理兩個部分。事故基礎數據管理模塊主要完成用戶的登錄退出管理，用戶對安全事故數據的查詢修改，以及添加新的事故數據信息。

圖2 系統數據流圖

圖3 安全事故數據三維可視化系統主要功能結構

地理數據管理模塊主要完成地區坐標數據的管理和地理區劃數據的管理，這些數據與事故基礎數據進行組合，使得后者能夠具備經緯度等地理信息，為三維展示提供較為完整的數據支持。

系統數據來源于國家安全生產監督管理總局網站，但是事故信息僅包含事故發生時間、死亡人數和事故簡況，事故發生地點和事故類型均包含在事故簡況中，因此，對獲取到的原始數據進行分類整理后，使其具備發生時間、死亡人數、事故發生所在省市、事故類型等屬性，為事故數據的分析整理提供良好的數據支持。

數據三維可視化實現

結合ECharts-X組件，本系統提供了多種數據三維展示方式，以便能夠以多種不同的緯度對數據進行分析對比，同時提供多種操作，如拖拽、收縮放大、調整數據閾值改變顯示數據的數量等，方便用戶分析數據。

（1）三維地理信息與二維圖表結合，展示不同地理區劃的相關數據，如圖4所示。

利用ECharts-X構建三維地球和地理信息數據，結合ECharts相關圖表，在展示行政區劃的同時，通過用戶簡單的點擊操作，利用柱狀圖展示相關地區歷年事故數據信息，使得數據的瀏覽更加直觀、具體。

（2）利用標柱，為數據在三維空間中提供高度緯度，使數據信息更加形象，同時不同區域數據間對比更加清晰，如圖5所示。

采用標柱的方式進行數據展示，高度維的添加和著色為數據提供了更多層次的信息，使得分析人員更加關注數據統計和數據間的橫向比較，便于得出相應的分析結果。

采用平面模式，進行地區級下鉆，查看相關安全事故事故，如圖6所示。

平面模式可以使觀察視角脫離三維地球只能通過放縮進行查看地區級數據的限制，在瀏覽器中所根據選中的省份，展示相應的市區級地理信息和行政劃分，通過鼠標懸浮或點擊操作展示對應的事故數據，使得數據展示直觀具體。

圖4 三維地理信息和二維圖表組合展示

圖5 各省市數據信息的標注化展示

圖6 地區級數據下鉆

系統開發技術

事故數據三維可視化展示結合了ECharts和ECharts-X組件，主要采用ECharts柱狀圖與三維地理信息進行組合，以及ECharts-X標柱模型和平面地圖模型。

系統開發采用mySQL關系型數據庫存儲相關數據，以PhpStorm9.0為開發平臺，服務器端采用php開發語言，瀏覽器端采用JavaScript開發語言進行開發工作，客戶端瀏覽器采用支持WebGL的谷歌瀏覽器，系統選用Apache作為系統的web服務器。

結語

基于WebGL和百度ECharts-X的安全事故數據三維可視化系統，大大簡化了安全事故數據分析的實際工作，通過簡單的操作，減少了安全事故數據信息管理所需的人力資源，提高了工作效能，也為預防安全生產事故提供了決策依據。

10.3969/j.issn.1001-8972.2015.23.010