highcharts饼图展示

个人做项目期间遇到一个需要用图形来展示数据的模块 在网上找了很久 前两天是数据都拿到了 返回格式跟饼图的格式一模一样 就是不出来我想要的数据 然而今天看了一篇博主的博客发现是我想要的效果 使用了一下发现图形出来了 困扰了我这两天头疼的事情

在写展示图形的时候 js里要写两个方法  前提是dao层那边返回格式必须跟这个饼图要一样

<script type="text/javascript">
$(function() {
	getcount();
	showCharts();
});

var arr = [];
function getcount(){
	arr = [];
	$.ajax({
		async:false,
		type:'post',
		url: pro_Url+'/dict/serviceAction_typeCount',
		dataType:"json",
		success:function(data){
			$(data).each(function(i,item){
				console.log(item.name);
                arr.push([item.name,Number(item.y)]);
            }); 
		}
	})
}
function showCharts() {
	Highcharts.setOptions({ 
	    colors: [ '#6AF9C4','#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#058DC7','#64E572', '#FF9655', 
	'#FFF263'] 
	}); 
	var chart = Highcharts.chart('container', {
	chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
	},
	title: {
			text: '订单物料数量占比',
			style:{
				color: '#3E576F',
		        fontSize: '25px',
		        fontWeight: 'bold'
		    }
	},
	tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
			pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
							enabled: true,
							format: '<b>{point.name}</b>: {point.percentage:.1f} %',
							style: {
									color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#058DC7'
							}
					},
					showInLegend: true ,
					states: {
							hover: {
									enabled: false
							}  
					},
					slicedOffset: 20,         // 突出间距
					point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面
							events: {
									// 鼠标滑过是，突出当前扇区
									mouseOver: function() {
											this.slice();
									},
									// 鼠标移出时，收回突出显示
									mouseOut: function() {
											this.slice();
									},
									// 默认是点击突出，这里屏蔽掉
									click: function() {
											return false;
									}
							}
					}
			}
	},
	series: [{
		    size:'100%',
			type: 'pie',
			name: '服务',
		    data:  arr //放上面最后返回的数组
	}]
});
}

</script>

控制层 我最后返回的是list装的map集合

/**
	 * 查询类型的count
	 * @return
	 */
	public String typeCount() {
		List<Map<String, Object> > list=new ArrayList<>();
		Map<String, Object> dict=null ;
		try {
			List<Map<String, Object>> typeCount = this.serviceBiz.typeCount(request.getParameterMap(),null);
			for (Map<String, Object> map : typeCount) {//再次遍历
				dict= new HashMap<>();
				String name=(String) map.get("svr_type");
				dict.put("name",name);
				dict.put("y",map.get("count"));
				list.add(dict);
			}
			System.out.println(typeCount);
			System.out.println(list);
			super.writer(list);
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();

记住一点 格式name是String y是int型 这里是f12打印

1. 1. {name: "咨询", y: 1}
   2. 1:{name: "建议", y: 2}
   3. 2:{name: "投诉", y: 1}

 

最后效果：