ajax 技术动态加载数据,ECharts通过ajax实现动态加载数据

搞了好久，看着简单，碰到各种麻烦，记录一下，以备后用。ps:还是志哥帮忙搞定的。

详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成数据并返回给客户端；4.客户端接收数据后显示。

ajax如下：

var myChart = echarts.init(document.getElementById('main'));

/* myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 */

$(document).ready(function() {

var m = new Map();

$("#btnSubmit").click(function() {

var names=[]; //部门数组(实际用来盛放X轴坐标值)

var nums=[]; //天数数组(实际用来盛放Y坐标值)

$.ajax({

url: "${ctx}/sign/signAttendTest/find",

type: "POST",

datatype:"json",

data: { status:$("#status").val(),

beginDate:$("#beginDate").val(),

endDate:$("#endDate").val()},

success: function(date) {

m = date.count ;

names = date.dept;

for (var i = 0; i < names.length; i++) {

var dd = names[i];

nums.push(m[dd]);

}

myChart.setOption({ //加载数据图表

title : {

text: '出勤率展示',

},

tooltip : {

trigger: 'axis'

},

legend: {

data:['天数']

},

toolbox: {

show : true,

feature : {

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar']},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

xAxis : [

{

type : 'category',

data : names,

axisLabel:{

interval:0, //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数

/* rotate:30 */

formatter:function(value)

{

debugger

var ret = "";//拼接加\n返回的类目项

var maxLength = 5;//每项显示文字个数

var valLength = value.length;//X轴类目项的文字个数

var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数

if (rowN > 1)//如果类目项的文字大于3,

{

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;

}

}

}

}

],

yAxis : [

{

type : 'value',

length:1,

}

],

series : [

{ barWidth: 30,

name:'天数',

type:'bar',

data:nums,

markPoint : {

data : [

{type : 'max', name: '最大值'},

{type : 'min', name: '最小值'}

]

},

markLine : {

data : [

{type : 'average', name: '平均值'}

]

}

},

]

});

}

});

});

});

web层

@RequiresPermissions(“sign:signUserEntity:view”)

@RequestMapping(value = “find”, method=RequestMethod.POST)

@ResponseBody

public Map from(SignUserEntity signUserEntity, HttpServletRequest request, HttpServletResponse response, RedirectAttributes redirectAttributes,Model model) {

List OutOfWork=signUserEntityService.findOutOfWorkTest(signUserEntity);

List officeList = new ArrayList<>();

Map cardNumber = new HashMap();

Map countMapNew = new HashMap<>();

for (SignUserEntity su : OutOfWork) {

if(!StringUtils.isBlank(su.getOfficeName()) && !StringUtils.isBlank(su.getCount())){

officeList.add(su.getOfficeName());

Map countMap = new HashMap<>();

countMap.put(su.getOfficeName(), su.getCount());

countMapNew.putAll(countMap);

}

}

cardNumber.put(“dept”,officeList);

cardNumber.put(“count”,countMapNew);

return cardNumber;

}

效果：