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

setRsIdTag（'ID'）;

varectableMenu=newEctableMenu（'contextMenu','ec_table'）;

<%@includefile="/jsp/inc/scripts.inc.jsp"%>

varapproval=document.getElementById（'approval'）;

varresizeApproval=function（）{

$（approval）.css（{"width:

":

$（"#approval"）.parent（）.css（"width"）}）;

};

resizeApproval（）;

varmyChartApproval=echarts.init（approval）;

optionApproval={

color:

['#3c8dbc'],

title:

{

text:

'年级人数统计'

},

tooltip:

{},

legend:

{

data:

['人数']

},

xAxis:

{

data:

[]

},

yAxis:

{},

axisLabel:

{

interval:

0,

formatter:

function（value）

{

varret="";

varmaxLength=3;

varvalLength=value.length;

varrowN=Math.ceil（valLength/maxLength）;

if（rowN>1）

{

for（vari=0;i

vartemp="";

varstart=i*maxLength;

varend=start+maxLength;

temp=value.substring（start,end）+"\n";

ret+=temp;

}

returnret;

}

else{

returnvalue;

}

}

},

series:

[{

name:

'人数',

type:

'bar',

data:

[]

}]

};

myChartApproval.setOption（optionApproval）;

vardatacharAURLA="index?

ClassTestSelectList&actionType=queryApproval"

sendRequest（datacharAURLA,{onComplete:

function（responseText）{

varjson=（$.parseJSON（responseText））;

myChartApproval.setOption（json）;

}}）;

window.onresize=function（）{

resizeApproval（）;

myChartApproval.resize（）;

}

在ClassTestSelectListHandler中添加queryApproval方法将所查询数据转换为json格式，利用ajax获取到数据后再生成echarts，将数据赋值给echarts相关配置，使图表显示变为动态数据。

代码如下：

@PageAction

publicViewRendererqueryApproval（DataParamparam）{

StringresponseText="";

try{

JSONObjectjsonObject=newJSONObject（）;

JSONArrayxAxis=newJSONArray（）;

JSONArrayseriess=newJSONArray（）;

JSONObjectxAxisObject=newJSONObject（）;

JSONObjectseriesIsGObject=newJSONObject（）;

JSONArrayxAxisDataArray=newJSONArray（）;

JSONArrayseriesIsGArray=newJSONArray（）;

ListclassId=getService（）.findClassIdRecord（param）;

for（inti=0;i

MapdateRow=classId.get（i）;

xAxisDataArray.put（dateRow.get（"CLASS"））;

seriesIsGArray.put（dateRow.get（"PEOPLE"））;

}

xAxisObject.put（"data",xAxisDataArray）;

xAxis.put（xAxisObject）;

jsonObject.put（"xAxis",xAxis）;

seriesIsGObject.put（"data",seriesIsGArray）;

seriess.put（seriesIsGObject）;

jsonObject.put（"series",seriess）;

responseText=jsonObject.toString（）;

}catch（Exceptione）{

log.error（e.getLocalizedMessage（）,e）;

}

returnnewAjaxRenderer（responseText）;

}

在ClassTestSelect.java中添加接口。

代码如下：

ListfindClassIdRecord（DataParamparam）;

在ClassTestSelectImpl.java中添加相应的实现：

代码如下：

@Override

publicListfindClassIdRecord（DataParamparam）{

StringstatementId=sqlNameSpace+"."+"findClassIdRecord";

Listresult=this.daoHelper.queryRecords（statementId,param）;

returnresult;

}

最后在ClassTestSelect.xml中添加查询SQL语句

代码如下：

SELECT

CLASS,COUNT（SEX）ASPEOPLE

FROMclass_test

WHERE1=1

GROUPBYCLASS

ORDERBYID

5.3功能检测

登录http:

//localhost:

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

打开人数管理新增数据。

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

6注意事项

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

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

Echarts中数据：

Handler中获取的数据：

7心得总结

JSON数据格式不仅比较简单，而且还易于读写，格式都是压缩的，所以占用宽带较小；经过对JSON的学习和Echarts的实际运用，了解了JSON数据格式的语法规则和使用方法，这些都是JSON基础知识，所以在了解了基础知识后还有很多关于JSON数据格式的知识需要我们后续进行补充和学习。

8附件说明

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

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

注意：

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