Echarts图表实现后台数据统计
柱状图获取后台数据展示：
饼图获取后台数据展示：
前端实现方法：
var myChart = echarts.init(document.getElementById('div1'));
var myChart1 = echarts.init(document.getElementById('div2'));
var names = [];
var values = [];
$.ajax({
type : "POST",
async:true,
url : /*[[@{/admin/getCharts}]]*/,
dataType : "json",
success : function(result) {
if (result != null && result.length > 0) {
for(var i=0;i
names.push(result[i].name);
values.push(result[i].value);
}
myChart.setOption({
color:['#63b2ee', '#76da91', '#f8cb7f','#f89588','#7cd6cf'],
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : names,
axisTick : {
alignWithLabel : true
}
}
],
yAxis: [
{
type: 'value'
}
],
series : [
{
name : '数据柱图',
type : 'bar',
barWidth : '50%',
data : values
}
]
});
myChart1.setOption({
color:['#63b2ee', '#76da91', '#f8cb7f','#f89588','#7cd6cf'],
tooltip : {
trigger : 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
bottom: 10,
left: 'center',
data: names
},
series : [
{
name: '数据饼图',
type : 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data : result
}
]
});
}else{
alert("图表请求数据为空，可能服务器暂未录入，您可以稍后再试！");
}
},
error:function(errorMsg){
alert("图表请求数据失败，可能是服务器开小差了");
}
});
后端实现方法：
@RequestMapping(value="/getCharts",method=RequestMethod.POST)
@ResponseBody
public List getCharts(){
List list=new ArrayList();
//发布量
int blogCount=blogService.getAllCount();
//阅读量
int sumViews=blogService.sumViews();
//点赞量
int thumbsupCount=thumbsUpService.getAllCount();
//评论量
int commentCount=commentService.getAllCount();
//收藏量
int collectionCount=collectionService.getAllCount();
list.add(new EchartsData("发布量",blogCount));
list.add(new EchartsData("阅读量",sumViews));
list.add(new EchartsData("点赞量",thumbsupCount));
list.add(new EchartsData("评论量",commentCount));
list.add(new EchartsData("收藏量",collectionCount));
return list;
}
仪表盘界面：
