去https://www.echartsjs.com/index.html官网下载echarts.js
后台直接返回JSON对象
根据返回JSON对象进行调用所需的名称和数量
var a=[];
//b为所需的纵坐标数组
var b=[];
for (var i = 0; i < res.length; i++) {
a.push(res[i].readrooms.name);
b.push(res[i].num);
}
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title : {
text : '人员数据统计'
},
tooltip : {},
legend : {
data : [ '销量' ]
},
toolbox : {
show : true,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar', 'stack', 'tiled' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
xAxis : {
data : a
},
yAxis : {
type : 'value',
name : '阅读人数(个)',
axisLabel : {
formatter : function(value) {
var texts = [];
if (value == 1) {
texts.push('1');
} else if (value == 5) {
texts.push('5');
} else if (value == 10) {
texts.push('10');
} else if (value == 15) {
texts.push('15');
} else if (value == 20) {
texts.push('20');
} else if (value == 0) {
texts.push('0');
}
return texts;
}
}
}
,
series : [ {
name : '人数',
type : 'bar',
data : b
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);