JSON数据在Echarts图表中的运用
1概述
近期在产品开发过程中JSON数据在Echarts图表中使用的比较频繁，所以笔者结合近期学到的知识，创建一个Echarts图表简单样例工程，其中利用JSON到后台获取数据传至JS页面，从而实现Echarts图表的动态真实数据，通过样例来与大家一起分享学习经验以及心得体会。
2预期读者
1.数通畅联全体员工
2.IT相关行业工作者
3JSON理解
JSON(JavaScript Object Notation, 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.利用AEAI DP创建简单查询功能，加入Echarts图表及echarts.js文件，调整页面布局。
4.在handler中扩展方法，利用JSON数据格式从后台获取数据传至前台JS页面的Echarts图表中，将图表显示内容变为真实数据。
5.扩展查询数据接口实现类及SQL语句。
6.功能检测消缺。
5实现步骤
5.1前置工作
此次样例运用到了Echarts及AEAI DP开发平台（数通畅联），两款产品都可以到相应下载，然后解压附件搭建样例使用。
    创建名为jsontest的数据库，利用AEAI DP连接并初始化数据库生成基础支撑表，创建CLASS_TEST表，运用DP创建一个名为ClassTestSelect信息查询功能页面和一个名为ClassTestManage单表操作功能页面，扩充预置数据。
5.2功能开发
将Echarts图表所需的echarts.js文件放入如下目录中。
在ClassTestSelectList.jsp页面中引入echarts.js样式文件。
代码如下：
<script src="js/echarts.js" language="javascript"></script>
调整页面，添加Echart图表及图表自适应功能。
代码如下：
<table width="100%" style="margin:0px;">
<tr>
<td width="85%" valign="top">
    <div style="height:250px;">
        <div id="approval" style="width: 60%;height:100%; float: left; margin-left: 18%;"></div>
    </div>
<div>
<ec: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"
>
<ec:row styleClass="odd" ondblclick="showDetailBox()" oncontextmenu="selectRow(this,{ID:'${row.ID}'});refreshConextmenu()" onclick="selectRow(this,{ID:'${row.ID}'})">
    <ec:column width="50" style="text-align:center" property="_0" title="序号" value="${GLOBALROWCOUNT}" />
    <ec:column width="100" property="CLASS" title="班级"  />
    <ec:column width="100" property="NAME" title="姓名"  />
    <ec:column width="100" property="SEX" title="性别"  mappingItem="SEX"/>
</ec:row>
</ec:table>
</div>
</td>
</tr>
</table>
<input type="hidden" name="ID" id="ID" value="" />
<input type="hidden" name="actionType" id="actionType" />
<script language="JavaScript">
setRsIdTag('ID');
var ectableMenu = new EctableMenu('contextMenu','ec_table');
</script>
</form>
</body>
</html>
<%@include file="/jsp/inc/scripts.inc.jsp"%>
<script type="text/javascript">
var approval = ElementById('approval');
var resizeApproval = function () {
    $(approval).css({"width:":$("#approval").parent().css("width")});
};
resizeApproval();
var myChartApproval = echarts.init(approval);
optionApproval = {
            color: ['#3c8dbc'],
            title: {
                text: '年级人数统计'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            axisLabel: { 
                interval: 0, 
                formatter:function(value) 
                { 
                    var ret = "";
                    var maxLength = 3;
                    var valLength = value.length;
                    var rowN = il(valLength / maxLength);
                    if (rowN > 1)
                    { 
                        for (var i = 0; i < rowN; i++) { 
                            var temp = "";
                            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: []
            }]
        };
myChartApproval.setOption(optionApproval);
var datacharAURLA = "index?ClassTestSelectList&actionType=queryApproval"
sendRequest(datacharAURLA,{onComplete:function(responseText){
    var json = ($.parseJSON(responseText));
    myChartApproval.setOption(json);
}});
size = function () {
    resizeApproval();   
    size();
}
</scriptsetoption>
在ClassTestSelectListHandler中添加queryApproval方法将所查询数据转换为json格式，利用ajax获取到数据后再生成echarts，将数据赋值给echarts相关配置，使图表显示变为动态数据。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。