json数据在echarts图表中的运用

1、JSON 数据在 Echarts 图表中的运用1概述近期在产品开发过程中JSON 数据在Echarts 图表中使用的比较频繁，所以笔者结合近期学到的知识，创建一个 Echarts 图表简单样例工程，其中利用 JSON到获取数据传至JS 页面，从而实现Echarts 图表的动态真实数据，通过样例来与大家一起学习经验以及心得体会。2预期读者1. 数通畅联全体员工2. IT 相关行业工作者3JSON 理解ion, JS 对象标记) 是一种轻量级的格式。JSON(JavaScript Object No采用完全独立于编程语言的文本格式来和表示数据，简洁和清晰的层次结构使得 JSON 成为理想的语言。易

2、于人阅读和编写，同时也易于机器和生成，并有效地网络传输效率。3.1 语则所有JSON 格式的数据都需要遵循以下规则：1. 数据之间要用逗号” , ”分隔。2. 名称与值的用冒号” : ”表示。3. 对象用大括号” ”表示。4. 数组用方括号” ”表示。3.2 JSONJSON 对象结构以 ” 大括号开始，以 ” 大括号结束。中间部分以多个”，”逗号分隔的”名称” : ”值”对，关键字和值之间以”：”分隔，语法结构如下：3.3 JSONJSON 数组结构以” ”开始，以” ”结束。中间由多个以”，”逗号分隔的值组成，语法结构如下：4总体思路1. 准备相关工具及所需文件搭建样例。2. 创建数据库利

3、用DP 连接初始化数据库，新增CLASS_TEST 表格扩充预置数据。3. 利用AEAI DP 创建简单查询功能，加入 Echarts 图表及echarts.js 文件，调整页面布局。4. 在handler 中扩展方法，利用 JSON 数据格式从获取数据传至前台JS 页面的 Echarts 图表中，将图表显示内容变为真实数据。5. 扩展查询数据接口实现类及 SQL 语句。6. 功能检测消缺。5实现步骤5.1 前置工作此次样例运用到了 Echarts 及AEAI DP 开发（数通畅联），两款产品都可“Name” : “demo” , “lastName” : “demon”,“Name” : “

4、demo” , “lastName” : “demon”数组 “Name” : “demo” , “lastName” : “demon” 对象以到相应官网，然后解压附件搭建样例使用。创建名为 jsontest 的数据库，利用 AEAI DP 连接并初始化数据库生成基础支撑表，创建 CLASS_TEST 表，运用 DP 创建一个名为 ClassTestSelect 信息查询功能页面和一个名为ClassTestManage 单表操作功能页面，扩充预置数据。5.2 功能开发将Echarts 图表所需的echarts.js 文件放入如下目录中。在ClassTestSelectList.jsp 页面中

5、引入echarts.js 样式文件。代码如下：调整页面，添加Echart 图表及图表自适应功能。代码如下： setRsIdTag(ID);var ectable= new Ectable(context,ec_table);var approval =.geementById(approval);var resizeApproval = function () $(approval).css(width:$(#approval).parent().css(width);resizeApproval();var myChartApproval = echarts.init(approval);

6、optionApproval = color: #3c8dbc, title: text: 年级人数统计,tooltip: , legend: data:人数,xAxis: data: ,yAxis: , axisLabel: erval: 0, formatter:function(value)var ret = ;var maxLength = 3;var valLength = value.length;var rowN = Math.ceil(valLength / maxLength);if (rowN 1)for (var i = 0; i rowN; i+) var temp =

7、 ;var start = i * maxLength;var end = start + maxLength;temp = value.substring(start, end) + n; ret += temp;return ret;else return value;,series: name: 人数,type: bar,data: ;在 ClassTestSelectLisndler 中添加 queryApproval 方法将所查询数据转换为json 格式，利用 ajax 获取到数据后再生成echarts，将数据赋值给 echarts 相关配置，使图表显示变为动态数据。代码如下：Pag

8、eActionpublic ViewRenderer queryApproval(DataPararam) String responseText = ;try JSONObject jsonObject = new JSONObject(); JSONArray xAxis = new JSONArray(); JSONArray seriess = new JSONArray(); JSONObject xAxisObject = new JSONObject();JSONObject seriesIsGObject = new JSONObject(); JSONArray xAxisD

9、ataArray = new JSONArray(); JSONArray seriesIsGArray = new JSONArray();List cla= getService().findClaRecord(param);for (i=0;icla.size();i+) Map dateRow = cla.get(i); xAxisDataArray.put(dateRow.get(CLASS); seriesIsGArray.put(dateRow.get(PEOPLE);xAxisObject.put(data, xAxisDataArray); xAxis.put(xAxisOb

10、ject); jsonObject.put(xAxis, xAxis); seriesIsGObject.put(data, seriesIsGArray); seriess.put(seriesIsGObject); jsonObject.put(series, seriess);responseText = jsonObject.toString();myChartApproval.setOption(optionApproval);var dharAURLA = index?ClassTestSelectList&actionType=queryApproval sendRequest(

11、dharAURLA,plete:function(responseText)var json = ($.parseJSON(responseText); myChartApproval.setOption(json););window.onresize = function () resizeApproval(); myChartApproval.resize();在ClassTestSelect.java 中添加接口。代码如下：在ClassTestSelectImpl.java 中添加相应的实现：代码如下：最后在ClassTestSelect.xml 中添加查询 SQL 语句代码如下：5.3

12、 功能检测登录在系统管理中的功能管理配置页面，控制器分别为人数管理（）、人数统计（）。打开人数管理新增数据。ClassTestSelectListClassTestManageList SELECTCLASS,COUNT(SEX) AS PEOPLEFROM class_test WHERE 1=1 GROUP BY CLASS ORDER BY IDOverridepublic List findClaRecord(DataPararam) String sementId = sqlNameSpace+.+findClaRecord;List result = this.Helper.que

13、ryRecords(sementId, param);return result;List findClaRecord(DataPararam);catch (Exception e) log.error(e.getLocalizedMessage(), e);return new AjaxRenderer(responseText);然后打开人数统计查看Echarts 图表显示的数据内容，鼠标放在图表上有滑动效果。6注意事项1. 引入echarts.js 样式文件的时候需要注意路径的存放位置，否则会导致图表无法显示。2. JSON 获取的数据配置需要与Echarts 图表所需的配置相同。Echarts 中数据：Handler 中获取的数据：7心得总结JSON 数据格式不仅比较简单，而且还易于读写，格式都是压缩的，所以占用宽带较小；经过对JSON 的学习和Echarts 的实际运用，了解了JSON 数据格式的语则和使用方法，这些都是 JSON 基础知识，所以在了解了基础知识后还有很多关于JSON 数据格式的知识需要后续进行补充和学习。8