劉志遠(yuǎn) 楊 琭 閻光偉

基于ECharts-X的安全事故數(shù)據(jù)三維可視化系統(tǒng)

劉志遠(yuǎn) 楊 琭 閻光偉

我國安全生產(chǎn)事故頻發(fā)，安全生產(chǎn)環(huán)境不容樂觀。本文以建設(shè)安全事故數(shù)據(jù)三維可視化分析展示平臺(tái)為目標(biāo)，結(jié)合webGL相關(guān)技術(shù)，利用百度ECharts-X組件，以WebStorm 10.0為開發(fā)平臺(tái)，設(shè)計(jì)并實(shí)現(xiàn)了基于瀏覽器的安全事故數(shù)據(jù)三維可視化分析展示系統(tǒng)。該系統(tǒng)分析數(shù)據(jù)結(jié)果清晰、直觀，可以為預(yù)防安全生產(chǎn)事故提供決策依據(jù)。

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

關(guān)鍵技術(shù)介紹

本系統(tǒng)采用百度ECharts-X組件進(jìn)行三維數(shù)據(jù)展示，該組件是基于ECharts的擴(kuò)展。ECharts是百度前端數(shù)據(jù)可視化團(tuán)隊(duì)推出的開源項(xiàng)目，已經(jīng)得到商業(yè)應(yīng)用。該組件基于html5 Canvas，是一個(gè)由Javascript編寫的圖表庫，能夠提供高度可定制化的可視化圖表。ECharts-X是 ECharts 團(tuán)隊(duì)推出的全新 3D 可視化庫，它是基于 ECharts 的擴(kuò)展，底層深度整合了 WebGL 庫QTEK和 Canvas2D 庫ZRender。

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

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

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

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

系統(tǒng)設(shè)計(jì)

系統(tǒng)體系結(jié)構(gòu)

整個(gè)系統(tǒng)采用分層結(jié)構(gòu)，分別為表示層、事務(wù)邏輯層和數(shù)據(jù)存儲(chǔ)層，如圖1所示。

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

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

數(shù)據(jù)存儲(chǔ)層用于存儲(chǔ)和管理安全事故原始數(shù)據(jù)，通過數(shù)據(jù)庫管理系統(tǒng)對數(shù)據(jù)進(jìn)行高效的存儲(chǔ)、訪問、索引以及維護(hù)，為整個(gè)系統(tǒng)提供穩(wěn)定的數(shù)據(jù)存儲(chǔ)支持。

圖1 三維可視化系統(tǒng)體系結(jié)構(gòu)

表1 安全事故數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)

系統(tǒng)基礎(chǔ)數(shù)據(jù)的組織

在整個(gè)系統(tǒng)體系結(jié)構(gòu)中，系統(tǒng)需要的基礎(chǔ)數(shù)據(jù)通過數(shù)據(jù)存儲(chǔ)層進(jìn)行管理。本系統(tǒng)采用關(guān)系型數(shù)據(jù)庫MySQL進(jìn)行數(shù)據(jù)存儲(chǔ)和管理，數(shù)據(jù)來源為國家安全生產(chǎn)監(jiān)督管理總局網(wǎng)站上收集得到2002到2011這10年間國內(nèi)發(fā)生的安全事故數(shù)據(jù)，基礎(chǔ)數(shù)據(jù)在數(shù)據(jù)庫中的存儲(chǔ)結(jié)構(gòu)如表1所示。

系統(tǒng)數(shù)據(jù)流圖

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

系統(tǒng)功能介紹及實(shí)現(xiàn)

系統(tǒng)功能分為事故數(shù)據(jù)管理部分和數(shù)據(jù)三維展示部分，主要功能結(jié)構(gòu)圖如圖3所示。

數(shù)據(jù)管理

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

圖2 系統(tǒng)數(shù)據(jù)流圖

圖3 安全事故數(shù)據(jù)三維可視化系統(tǒng)主要功能結(jié)構(gòu)

地理數(shù)據(jù)管理模塊主要完成地區(qū)坐標(biāo)數(shù)據(jù)的管理和地理區(qū)劃數(shù)據(jù)的管理，這些數(shù)據(jù)與事故基礎(chǔ)數(shù)據(jù)進(jìn)行組合，使得后者能夠具備經(jīng)緯度等地理信息，為三維展示提供較為完整的數(shù)據(jù)支持。

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

數(shù)據(jù)三維可視化實(shí)現(xiàn)

結(jié)合ECharts-X組件，本系統(tǒng)提供了多種數(shù)據(jù)三維展示方式，以便能夠以多種不同的緯度對數(shù)據(jù)進(jìn)行分析對比，同時(shí)提供多種操作，如拖拽、收縮放大、調(diào)整數(shù)據(jù)閾值改變顯示數(shù)據(jù)的數(shù)量等，方便用戶分析數(shù)據(jù)。

（1）三維地理信息與二維圖表結(jié)合，展示不同地理區(qū)劃的相關(guān)數(shù)據(jù)，如圖4所示。

利用ECharts-X構(gòu)建三維地球和地理信息數(shù)據(jù)，結(jié)合ECharts相關(guān)圖表，在展示行政區(qū)劃的同時(shí)，通過用戶簡單的點(diǎn)擊操作，利用柱狀圖展示相關(guān)地區(qū)歷年事故數(shù)據(jù)信息，使得數(shù)據(jù)的瀏覽更加直觀、具體。

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

采用標(biāo)柱的方式進(jìn)行數(shù)據(jù)展示，高度維的添加和著色為數(shù)據(jù)提供了更多層次的信息，使得分析人員更加關(guān)注數(shù)據(jù)統(tǒng)計(jì)和數(shù)據(jù)間的橫向比較，便于得出相應(yīng)的分析結(jié)果。

采用平面模式，進(jìn)行地區(qū)級下鉆，查看相關(guān)安全事故事故，如圖6所示。

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

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

圖5 各省市數(shù)據(jù)信息的標(biāo)注化展示

圖6 地區(qū)級數(shù)據(jù)下鉆

系統(tǒng)開發(fā)技術(shù)

事故數(shù)據(jù)三維可視化展示結(jié)合了ECharts和ECharts-X組件，主要采用ECharts柱狀圖與三維地理信息進(jìn)行組合，以及ECharts-X標(biāo)柱模型和平面地圖模型。

系統(tǒng)開發(fā)采用mySQL關(guān)系型數(shù)據(jù)庫存儲(chǔ)相關(guān)數(shù)據(jù)，以PhpStorm9.0為開發(fā)平臺(tái)，服務(wù)器端采用php開發(fā)語言，瀏覽器端采用JavaScript開發(fā)語言進(jìn)行開發(fā)工作，客戶端瀏覽器采用支持WebGL的谷歌瀏覽器，系統(tǒng)選用Apache作為系統(tǒng)的web服務(wù)器。

結(jié)語

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

10.3969/j.issn.1001-8972.2015.23.010