话不多说,直接贴代码。
// 请求参数
var data = {"schoolId":schoolId, "classId":classId, "dateTime":date};
$.ajax({
type:"get",
url:url,
data:data,
contentType : "application/json",
dataType:"json",
async : true,
success:function(msg){
// 饼图数据
barData.push({'value': msg['attendanceList'].length, 'name': '刷卡人数'});
barData.push({'value': msg['notSignInList'].length, 'name': '未刷卡人数'});
optionBar.series[0].data = barData;
myChart.setOption(optionBar);
}
})
// 考勤图饼图
var myChart = echarts.init(document.getElementById('attendance_bar'));
var optionBar = {
title: {
text: "考勤详情",
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['刷卡人数', '未刷卡人数']
},
series: [
{
name: '刷卡详情',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [],
color: ['#1890FF', '#F7B444']
}
]
参数详情:
type: 接口请求方式
url:后端接口地址
data: 接口参数(如上)
contentType:说明请求参数的类型
dataType:这里要注意!!如果返回的是一个页面地址,要换成‘html’,如果是map数据一定要写成json,具体细节可以百度一下。
async:用于控制同步和异步,默认是true,即ajax请求默认是异步请求
success:function(msg): ajax请求成功后执行的方法,msg为返回的数据,可自行命名。
下方代码是我举例如何对饼图数据进行填充,页面位置,只需在想要展示的地方增加一行代码即可
<div id="attendance_bar" style="margin-top: 50px;height:300px;width: 400px;"></div>
作为一个后端开发人员,我对前端的理解还很浅薄,写点东西也算是对自己经验的一些总结,如有不对,敬请指出,谢谢!!!!