赞
踩
先把官方的demo拿过来,唯一要变的就是data中的值
option = { title : { text: '南丁格尔玫瑰图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'面积模式', type:'pie', radius : [30, 110], center : ['75%', '50%'], roseType : 'area', data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] };
div中需要设置宽高,如何没有好像出不来效果
<div id=“myChart” style="width=400px;height=300px;"></div>
//需要在前端页面调用该方法就行 function getCharts (){ var mychart = echarts.init(document.getElementById("myChart")); var option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:[] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'面积模式', type:'pie', radius : [30, 110], center : ['75%', '50%'], roseType : 'area', data:[ ] } ] } mychart.setOption(option); window.addEventListener("resize",function(){ mychart.resize(); }); //中间写ajax请求,在请求成功的success中需要把后台的值放进data中 success:function(result){ var names=[]; var beWorth= []; $.each(result,function(key,values){ names.push(values.name); var obj = new object(); obj.name = values.name; obj.value = values.value; beWorth.push(obj); )} mychart.setOption({ legend:{ data:names }, series:{ name:'XXXX', data:beWorth } }) } }
在查询时首先要去重,并且统计个数,我在下面简单做一个表的查询,你们可以根据自己定义的表进行修改
service层 public List<对象> getName(){ String sql = "select distinct 字段名(taskname) from 表"; //把查询的list结果返回出去就好 } public Integer getCount(String name){ String sql = "select count(1) from 表 where taskname = ?"; //查询每个taskname的数量 } controller层 public void getEchart(){ Map<String,Object> map = new HashMap<>(); List<Map<String,Object>> list = new ArrayList<Map<String,Object>>(); List<对象> list = service.getName(); for(对象 obj: list){ String dataName = obj.getStr(字段名); Integer dataCount = service.getCount(dataName ); if(dataCount != 0 ){ map.put("name",dataName ); map.put("value",dataCount ); } list.add(map); } //最后只要把list返回出去就好了 }
有看不懂的可以提出来,出错的地方可以指出来。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。