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 数据查询页面