JSON数据在Echarts图表中的运用

JSON数据在Echarts图表中的运用

1 概述

近期在产品开发过程中JSON数据在Echarts图表中使用的比较频繁，所以笔者结合近期学到的知识，创建一个Echarts图表简单样例工程，其中利用JSON到后台获取数据传至JS页面，从而实现Echarts图表的动态真实数据，通过样例来与大家一起分享学习经验以及心得体会。

2 预期读者

1. 数通畅联全体员工 2. IT相关行业工作者

3 JSON理解

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。采用完全于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

3.1 语法规则

所有JSON格式的数据都需要遵循以下规则： 1. 数据之间要用逗号” , ”分隔。 2. 名称与值的映射用冒号” : ”表示。 3. 对象用大括号” { } ”表示。 4. 数组用方括号” [ ] ”表示。

JSON数据在Echarts图表中的运用 1 / 10

分享SOA平台软件 传递敏捷集成机制

3.2 JSON对象

JSON对象结构以 ”{” 大括号开始，以 ”}” 大括号结束。中间部分以多个”，”逗号分隔的”名称” : ”值”对构成，关键字和值之间以”：”分隔，语法结构如下： ｛ “firstName” : “demo” , “lastName” : “demon” ｝ 3.3 JSON数组

JSON数组结构以” [ ”开始，以” ] ”结束。中间由多个以”，”逗号分隔的值组成，语法结构如下：

[{“firstName” : “demo” , “lastName” : “demon”},{“firstName” : “demo” , “lastName” : “demon”}] 4 总体思路

1. 准备相关工具及所需文件搭建样例。

2. 创建数据库利用DP连接初始化数据库，新增CLASS_TEST表格扩充预置数据。 3. 利用AEAI DP创建简单查询功能，加入Echarts图表及echarts.js文件，调整页面布局。

4. 在handler中扩展方法，利用JSON数据格式从后台获取数据传至前台JS页面的Echarts图表中，将图表显示内容变为真实数据。 5. 扩展查询数据接口实现类及SQL语句。 6. 功能检测消缺。

5 实现步骤

5.1 前置工作

此次样例运用到了Echarts及AEAI DP开发平台（数通畅联），两款产品都可

JSON数据在Echarts图表中的运用 2 / 10

分享SOA平台软件 传递敏捷集成机制

以到相应官网下载，然后解压附件搭建样例使用。

创建名为jsontest的数据库，利用AEAI DP连接并初始化数据库生成基础支

撑表，创建CLASS_TEST表，运用DP创建一个名为ClassTestSelect信息查询功能页面和一个名为ClassTestManage单表操作功能页面，扩充预置数据。

5.2 功能开发

将Echarts图表所需的echarts.js文件放入如下目录中。

在ClassTestSelectList.jsp页面中引入echarts.js样式文件。 代码如下：

调整页面，添加Echart图表及图表自适应功能。 代码如下：

代码如下：

@PageAction public ViewRenderer queryApproval(DataParam param) { String responseText = \"\"; try { JSONObject jsonObject = new JSONObject(); JSONArray xAxis = new JSONArray(); JSONArray seriess = new JSONArray(); JSONObject xAxisObject = new JSONObject(); JSONObject seriesIsGObject = new JSONObject(); JSONArray xAxisDataArray = new JSONArray(); JSONArray seriesIsGArray = new JSONArray(); List classId = getService().findClassIdRecord(param); for (int i=0;i dateRow = classId.get(i); xAxisDataArray.put(dateRow.get(\"CLASS\")); seriesIsGArray.put(dateRow.get(\"PEOPLE\")); JSON数据在Echarts图表中的运用 6 / 10

分享SOA平台软件 传递敏捷集成机制

}catch (Exception e) { } return new AjaxRenderer(responseText); log.error(e.getLocalizedMessage(), e); } 在ClassTestSelect.java中添加接口。 代码如下：

List findClassIdRecord(DataParam param); 在ClassTestSelectImpl.java中添加相应的实现： 代码如下：

@Override public List findClassIdRecord(DataParam param) { } String statementId = sqlNameSpace+\".\"+\"findClassIdRecord\"; List result = this.daoHelper.queryRecords(statementId, param); return result; 最后在ClassTestSelect.xml中添加查询SQL语句 代码如下：

SELECT CLASS,COUNT(SEX) AS PEOPLE FROM class_test WHERE 1=1 GROUP BY CLASS ORDER BY ID 5.3 功能检测

登录http://localhost:6060/jsondemo在系统管理中的功能管理配置页面，控制器分别为人数管理（ClassTestManageList）、人数统计（ClassTestSelectList）。

打开人数管理新增数据。

JSON数据在Echarts图表中的运用 7 / 10

分享SOA平台软件 传递敏捷集成机制

然后打开人数统计查看Echarts图表显示的数据内容，鼠标放在图表上有滑动效果。

6 注意事项

1. 引入echarts.js样式文件的时候需要注意路径的存放位置，否则会导致图表无法显示。

JSON数据在Echarts图表中的运用 8 / 10

分享SOA平台软件 传递敏捷集成机制

2. JSON获取的数据配置需要与Echarts图表所需的配置相同。 Echarts中数据：

Handler中获取的数据：

7 心得总结

JSON数据格式不仅比较简单，而且还易于读写，格式都是压缩的，所以占用宽带较小；经过对JSON的学习和Echarts的实际运用，了解了JSON数据格式的

JSON数据在Echarts图表中的运用 9 / 10

分享SOA平台软件 传递敏捷集成机制

语法规则和使用方法，这些都是JSON基础知识，所以在了解了基础知识后还有很多关于JSON数据格式的知识需要我们后续进行补充和学习。

8 附件说明

附件为JSON样例工程压缩包，其中包含样例工程jsondemo 和数据库jsondemo.sql。

创建数据库然后创建class_test表，将jsondemo工程放入AEAI DP 的workspace文件夹目录下部署即可查看样例工程。

注意：Echarts图表所需要的echarts.js文件已经放入样例工程jsondemo/webRoot/js目录中无需再添加。

JSON数据在Echarts图表中的运用 10 / 10