JSON数据在Echarts图表中的运用.docx
- 文档编号:27083475
- 上传时间:2023-06-26
- 格式:DOCX
- 页数:12
- 大小:154.21KB
JSON数据在Echarts图表中的运用.docx
《JSON数据在Echarts图表中的运用.docx》由会员分享,可在线阅读,更多相关《JSON数据在Echarts图表中的运用.docx(12页珍藏版)》请在冰豆网上搜索。
JSON数据在Echarts图表中的运用
JSON数据在Echarts图表中的运用
1概述
近期在产品开发过程中JSON数据在Echarts图表中使用的比较频繁,所以笔者结合近期学到的知识,创建一个Echarts图表简单样例工程,其中利用JSON到后台获取数据传至JS页面,从而实现Echarts图表的动态真实数据,通过样例来与大家一起分享学习经验以及心得体会。
2预期读者
1.数通畅联全体员工
2.IT相关行业工作者
3JSON理解
JSON(JavaScript ObjectNotation,JS对象标记)是一种轻量级的数据交换格式。
采用完全独立于编程语言的文本格式来存储和表示数据,简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
3.1语法规则
所有JSON格式的数据都需要遵循以下规则:
1.数据之间要用逗号”,”分隔。
2.名称与值的映射用冒号”:
”表示。
3.对象用大括号”{}”表示。
4.数组用方括号”[]”表示。
3.2JSON对象
JSON对象结构以”{”大括号开始,以”}”大括号结束。
中间部分以多个”,”逗号分隔的”名称”:
”值”对构成,关键字和值之间以”:
”分隔,语法结构如下:
{“firstName”:
“demo”,“lastName”:
“demon”}
3.3JSON数组
JSON数组结构以”[”开始,以”]”结束。
中间由多个以”,”逗号分隔的值组成,语法结构如下:
[{“firstName”:
“demo”,“lastName”:
“demon”},{“firstName”:
“demo”,“lastName”:
“demon”}]
4总体思路
1.准备相关工具及所需文件搭建样例。
2.创建数据库利用DP连接初始化数据库,新增CLASS_TEST表格扩充预置数据。
3.利用AEAIDP创建简单查询功能,加入Echarts图表及echarts.js文件,调整页面布局。
4.在handler中扩展方法,利用JSON数据格式从后台获取数据传至前台JS页面的Echarts图表中,将图表显示内容变为真实数据。
5.扩展查询数据接口实现类及SQL语句。
6.功能检测消缺。
5实现步骤
5.1前置工作
此次样例运用到了Echarts及AEAIDP开发平台(数通畅联),两款产品都可以到相应官网下载,然后解压附件搭建样例使用。
创建名为jsontest的数据库,利用AEAIDP连接并初始化数据库生成基础支撑表,创建CLASS_TEST表,运用DP创建一个名为ClassTestSelect信息查询功能页面和一个名为ClassTestManage单表操作功能页面,扩充预置数据。
5.2功能开发
将Echarts图表所需的echarts.js文件放入如下目录中。
在ClassTestSelectList.jsp页面中引入echarts.js样式文件。
代码如下:
调整页面,添加Echart图表及图表自适应功能。
代码如下:
0px;"> 250px;"> 60%;height: 100%;float: left;margin-left: 18%;"> table form="form1" var="row" items="pageBean.rsList"csvFileName="人数统计.csv" retrieveRowsCallback="process"xlsFileName="人数统计.xls" useAjax="true"sortable="true" doPreload="false"toolbarContent="navigation|pagejump|pagesize|export|extend|status" width="100%"rowsDisplayed="15" listWidth="100%" height="250px" > rowstyleClass="odd"ondblclick="showDetailBox()"oncontextmenu="selectRow(this,{ID: '${row.ID}'});refreshConextmenu()"onclick="selectRow(this,{ID: '${row.ID}'})"> columnwidth="50"style="text-align: center"property="_0"title="序号"value="${GLOBALROWCOUNT}"/> columnwidth="100"property="CLASS"title="班级"/> columnwidth="100"property="NAME"title="姓名"/> columnwidth="100"property="SEX"title="性别"mappingItem="SEX"/> row> table>
setRsIdTag('ID');
varectableMenu=newEctableMenu('contextMenu','ec_table');