Echarts图表实现后台数据统计

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

Echarts图表实现后台数据统计

饼图获取后台数据展示:

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>

仪表盘界面:


Echarts图表实现后台数据统计


分享到:


相關文章: