JSON数据在Echarts图表中的运用.doc

《JSON数据在Echarts图表中的运用.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

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

2、言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。3.1语法规则所有JSON格式的数据都需要遵循以下规则：1.数据之间要用逗号〃，〃分隔。2.名称与值的映射用冒号〃：〃表示。3.对象用大括号〃{}"表?h。4.数组用方括号〃［］〃表示。3.2JSON对象JSON对象结构以〃{〃大括号开始，以〃丫大括号结朿。中间部分以多个〃，〃逗号分隔的〃名称〃：〃值〃对构成，关键字和值之间以S〃分隔，语法结构如下：{"firstName":"demo","lastName":"demon"}3.3JSON数组JSON数组结构以〃[〃开始，以〃]〃结朿。中间由多个以〃，〃逗

3、号分隔的值组成，语法结构如下：[{"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.扩展查询数据接口实现类及S

4、QL语句。6.功能检测消缺。5实现步骤5.1前置工作此次样例运用到了Echarts及AEAIDP开发平台（数通畅联），两款产品都可以到相应官网下载，然后解压附件搭建样例使用。创建名为jsontest的数据库，利用AEAIDP连接并初始化数据库生成基础支撑表，创建CLASS_TEST表，运用DP创建一个名为ClassTestSelect信息查询功能页面和一个名为ClassTestManage单表操作功能页面，扩充预置数据。5.2功能开发将Echarts图表所需的echarts.js文件放入如下冃录中。^7jsondemoJRESystemLibrary[miscdp・studio・

5、win32_x86]>d^srct>HotServerContainerLibraries▲0WebRoott>0css00fonts>0htmlt>3images▲3js>jqvalidatet>3validateKlArrayListjs囤bootstrap.minjs⑥calendars囘ContextMenujs囤draggabilly.pkgd.minjs團dtree.js囤ecsidejs囤extendjs囤global.js囤html5shiv.minjs囤jquery-1.10.2.minjs囤jquery-1.7.1.js囤jquery・migrate・l・2・

6、ljs囤jquery.alertsjs囤jquery.easyui.minjs在ClassTestSelectList.jsp页面中引入echarts.js样式文件。代码如下:调整页面，添加Echart图表及图表自适应功能。代码如下：

7、idth:60%;heightM00%;float:left;margin-left:18%;">