echarts 3d饼图_Echarts图表实现后台数据统计

最新推荐文章于 2024-07-23 14:59:06 发布

weixin_39536630

最新推荐文章于 2024-07-23 14:59:06 发布

阅读量628

点赞数

文章标签： echarts 3d饼图 echarts饼图 echarts饼图间隔前端echarts图可以传到后台吗后台实现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{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)@ResponseBodypublic 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;}

仪表盘界面：