ECharts類庫在氣象數據可視化圖形繪制中的應用

內蒙古自治區氣象信息中心 銀 笛

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

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

目前，常用的氣象數據可視化繪圖工具有Grads、NCL、Sufer、Matlab等，但是這些工具均需要安裝部署才可使用，且不利于二次擴展和本地應用程序對接。文中介紹了基于Echarts類庫的多要素氣象數據可視化圖形的繪制方法，實現了氣象數據可視化圖形繪制。

1 關鍵技術

1.1 ECharts

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

1.2 JQuery

JQuery是一個快速、簡潔的JavaScript框架，封裝了JavaScript常用的功能代碼，優化了HTML文檔操作、事件處理、動畫設計和Ajax交互，具有獨特的鏈式語法和短小清晰的多功能接口，并且可對CSS選擇器進行擴展，JQuery兼容各種主流瀏覽器。

2 主要實現方法

氣象數據可視化圖形繪制由數據獲取、ECharts類庫繪圖兩個步驟組成。

2.1 數據獲取

氣象數據可視化過程中所展示的數據隨業務需求實時更新，因此需要從服務器端請求數據，客戶端通過Ajax進行數據異步請求，實現與服務端交互，傳遞的參數包含站號、氣象要素、開始時間和結束時間，返回的數據格式為JSON，關鍵代碼如下：

2.2 ECharts類庫繪圖

Echarts的option選項屬性非常重要，是決定繪制圖形的重要屬性，包括公共選項、組件選項、數據選項等。

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

站點信息

3 應用與總結

本文研究的氣象數據可視化繪制方法已融入內蒙古自治區降水實況平臺并應用于業務，氣象業務人員通過點擊GIS地圖上的站點圖層即可查看各個站點氣象要素可視化圖片，滿足了從事氣象保障活動數據產品使用需求，數據查詢頁面如圖1所示。

圖1 數據查詢頁面