Echarts图表实现后台数据统计

柱状图获取后台数据展示:

饼图获取后台数据展示:

前端实现方法:

<code> 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{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("图表请求数据失败,可能是服务器开小差了"); } });/<code>

后端实现方法:

<code>@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; }/<code>

仪表盘界面: