ECharts類庫在氣象數(shù)據(jù)可視化圖形繪制中的應(yīng)用

內(nèi)蒙古自治區(qū)氣象信息中心 銀 笛

面對(duì)海量氣象數(shù)據(jù)，傳統(tǒng)的文本和表格查看數(shù)據(jù)的手段已不能滿足業(yè)務(wù)人員需求，如何快速獲取關(guān)注的數(shù)據(jù)信息是很有意義的研究方向。人眼對(duì)于色彩和圖形非常敏感，基于ECharts類庫，結(jié)合JQuery和Ajax技術(shù)，將氣象數(shù)據(jù)繪制為可視化圖形，不僅提高了數(shù)據(jù)辨識(shí)度，還將枯燥的氣象數(shù)據(jù)變得更加直觀，業(yè)務(wù)人員易于理解且增強(qiáng)了數(shù)據(jù)可讀性。

隨著氣象信息化和現(xiàn)代化發(fā)展，氣象資料在空間和時(shí)間尺度都發(fā)生了根本性的變化，面對(duì)日益豐富的氣象數(shù)據(jù)，如何利用先進(jìn)的技術(shù)手段展示氣象數(shù)據(jù)非常有意義。相比傳統(tǒng)的表格和文本，可視化圖形展示的氣象信息更豐富直觀，業(yè)務(wù)人員可以很方便的辨識(shí)氣溫、降水等信息的一段時(shí)間變化規(guī)律。

目前，常用的氣象數(shù)據(jù)可視化繪圖工具有Grads、NCL、Sufer、Matlab等，但是這些工具均需要安裝部署才可使用，且不利于二次擴(kuò)展和本地應(yīng)用程序?qū)?。文中介紹了基于Echarts類庫的多要素氣象數(shù)據(jù)可視化圖形的繪制方法，實(shí)現(xiàn)了氣象數(shù)據(jù)可視化圖形繪制。

1 關(guān)鍵技術(shù)

1.1 ECharts

ECharts是完全基于JavaScript語言開發(fā)的互聯(lián)網(wǎng)主流數(shù)據(jù)可視化圖表庫，可以繪制直觀、生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表，在PC和移動(dòng)設(shè)備均可流暢運(yùn)行，并兼容當(dāng)前互聯(lián)網(wǎng)大部分主流瀏覽器。ECharts類庫使用簡單，只需引入js文件即可，文中主要應(yīng)用了柱狀圖和折線圖完成氣象數(shù)據(jù)可視化展示。

1.2 JQuery

JQuery是一個(gè)快速、簡潔的JavaScript框架，封裝了JavaScript常用的功能代碼，優(yōu)化了HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互，具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展，JQuery兼容各種主流瀏覽器。

2 主要實(shí)現(xiàn)方法

氣象數(shù)據(jù)可視化圖形繪制由數(shù)據(jù)獲取、ECharts類庫繪圖兩個(gè)步驟組成。

2.1 數(shù)據(jù)獲取

氣象數(shù)據(jù)可視化過程中所展示的數(shù)據(jù)隨業(yè)務(wù)需求實(shí)時(shí)更新，因此需要從服務(wù)器端請(qǐng)求數(shù)據(jù)，客戶端通過Ajax進(jìn)行數(shù)據(jù)異步請(qǐng)求，實(shí)現(xiàn)與服務(wù)端交互，傳遞的參數(shù)包含站號(hào)、氣象要素、開始時(shí)間和結(jié)束時(shí)間，返回的數(shù)據(jù)格式為JSON，關(guān)鍵代碼如下：

2.2 ECharts類庫繪圖

Echarts的option選項(xiàng)屬性非常重要，是決定繪制圖形的重要屬性，包括公共選項(xiàng)、組件選項(xiàng)、數(shù)據(jù)選項(xiàng)等。

Option選項(xiàng)屬性大部分默認(rèn)僅對(duì)Title、legend、xAxis、yAxis和series選項(xiàng)賦值。Title標(biāo)題包含主標(biāo)題和子標(biāo)題，主標(biāo)題格式為“站名+天氣實(shí)況”，主標(biāo)題格式為“開始時(shí)間+至+結(jié)束時(shí)間”；legend屬性以數(shù)組的形式存儲(chǔ)不同要素?cái)?shù)據(jù)的圖例；xAxis屬性以數(shù)組的形式存儲(chǔ)資料觀測時(shí)間序列；yAxis屬性是對(duì)ECharts 圖表中直角坐標(biāo)系grid中的y軸進(jìn)行配置，文中繪圖采用的是雙Y軸，左側(cè)為折線圖坐標(biāo)軸，右側(cè)為柱狀圖坐標(biāo)軸，且根據(jù)要素值范圍自適應(yīng)調(diào)整坐標(biāo)軸區(qū)間；series屬性是繪圖的基礎(chǔ)數(shù)據(jù)，需要解析從服務(wù)端返回的JSON格式氣象數(shù)據(jù)，按照EChatrs格式要求重組，關(guān)鍵代碼如下所示：

站點(diǎn)信息

3 應(yīng)用與總結(jié)

本文研究的氣象數(shù)據(jù)可視化繪制方法已融入內(nèi)蒙古自治區(qū)降水實(shí)況平臺(tái)并應(yīng)用于業(yè)務(wù)，氣象業(yè)務(wù)人員通過點(diǎn)擊GIS地圖上的站點(diǎn)圖層即可查看各個(gè)站點(diǎn)氣象要素可視化圖片，滿足了從事氣象保障活動(dòng)數(shù)據(jù)產(chǎn)品使用需求，數(shù)據(jù)查詢頁面如圖1所示。

圖1 數(shù)據(jù)查詢頁面