柱狀圖獲取后臺數(shù)據(jù)展示：
餅圖獲取后臺數(shù)據(jù)展示：
前端實(shí)現(xiàn)方法：
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 : '數(shù)據(jù)柱圖',
type : 'bar',
barWidth : '50%',
data : values
}
]
});
myChart1.setOption({
color:['#63b2ee', '#76da91', '#f8cb7f','#f89588','#7cd6cf'],
tooltip : {
trigger : 'item',
formatter: '{a}
: {c} (u0z1t8os%)'
},
legend: {
bottom: 10,
left: 'center',
data: names
},
series : [
{
name: '數(shù)據(jù)餅圖',
type : 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data : result
}
]
});
}else{
alert("圖表請求數(shù)據(jù)為空，可能服務(wù)器暫未錄入，您可以稍后再試！");
}
},
error:function(errorMsg){
alert("圖表請求數(shù)據(jù)失敗，可能是服務(wù)器開小差了");
}
});
后端實(shí)現(xiàn)方法：
@RequestMapping(value="/getCharts",method=RequestMethod.POST)
@ResponseBody
public List getCharts(){
List list=new ArrayList();
//發(fā)布量
int blogCount=blogService.getAllCount();
//閱讀量
int sumViews=blogService.sumViews();
//點(diǎn)贊量
int thumbsupCount=thumbsUpService.getAllCount();
//評論量
int commentCount=commentService.getAllCount();
//收藏量
int collectionCount=collectionService.getAllCount();
list.add(new EchartsData("發(fā)布量",blogCount));
list.add(new EchartsData("閱讀量",sumViews));
list.add(new EchartsData("點(diǎn)贊量",thumbsupCount));
list.add(new EchartsData("評論量",commentCount));
list.add(new EchartsData("收藏量",collectionCount));
return list;
}
儀表盤界面：
