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;

}

仪表盘界面：