柱狀圖獲取後臺數據展示：
餅圖獲取後臺數據展示：
前端實現方法：
<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>
儀表盤界面：