Echarts 制作饼图

继上一篇博文: Echarts异步加载后端接口返回的Json数据生成图表之后,继续使用它的后端接口数据,制作饼图.方法是一致的.

源码:

package com.ytdx.entity;

import java.io.Serializable;

public class EchartsEntity implements Serializable {
    private String name;
    private Integer num;
	public EchartsEntity(String name, Integer num) {
		super();
		this.name = name;
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getNum() {
		return num;
	}
	public void setNum(Integer num) {
		this.num = num;
	}
    
}

package com.ytdx.action;

import java.util.ArrayList;
import java.util.List;


import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.ytdx.entity.EchartsEntity;
import com.ytdx.util.JsonUtils;
import com.ytdx.util.ListObject;
import com.ytdx.util.ResponseUtils;
import com.ytdx.util.StatusCode;

@Controller
public class EchartsAction {

	@RequestMapping(value = "/Echarts")
	public void findById(HttpServletResponse response) {
		ListObject listObject = new ListObject();
		List<EchartsEntity> list = new ArrayList<EchartsEntity>();     //这里是后台添加假数据,可以改写成数据查询的方式
		list.add(new EchartsEntity("帽子",50));
		list.add(new EchartsEntity("鞋子",126));
		list.add(new EchartsEntity("毛衣",75));
		list.add(new EchartsEntity("羽绒服",201));
		list.add(new EchartsEntity("羊毛衫",172));
		listObject.setItems(list);
		listObject.setCode(StatusCode.CODE_SUCCESS);
		listObject.setMsg("成功");
		ResponseUtils.renderJson(response, JsonUtils.toJson(listObject));
	}
	
	@RequestMapping(value="/PieShow")
	public ModelAndView PieShow(ModelAndView mv) {
		mv.setViewName("/admin/PieShow");
		return mv;
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>饼图</title>
<script src="js/jquery-3.0.0.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高 -->
<div id="Main" style="width: 900px; height: 600px;border: 1px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('Main'));
	// 显示标题，图例和空的坐标轴
	myChart.setOption({
		title : {
			text : '海哥商城种类数量',
			subtext : '纯属虚构',
			x : 'center'
		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b} : {c} ({d}%)"
		},
		legend : {
			orient : 'vertical',
			x : 'left', 
			data : [] 
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'pie', 'funnel' ],
					option : {
						funnel : {
							x : '25%',
							width : '50%',
							funnelAlign : 'left',
							max : 1548
						}
					}
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		series : [ {
			name : '种类数量',
			type : 'pie',
			radius : '55%',
			center : [ '50%', '60%' ],
			data : []
		} ]
	});
	myChart.showLoading(); 
	var names = []; 
	var values = []; 
	
	$.ajax({
		type : 'get',
		async : true,
		url : "${pageContext.request.contextPath }/Echarts",
		dataType : "json",
		success : function(data) {
			if (data.code == 'success') {
				$.each(data.items, function(k, v) {       //遍历返回的JSON数据   
					names.push(v.name); 
					values.push({
						name : v.name,
						value : v.num
					});
				});
				myChart.hideLoading(); //隐藏加载动画
				myChart.setOption({ //加载数据图表                
					legend : {
						data : names
					},
					series : [ {
						data : values
					} ]
				});
			}else{
				alert("数据返回失败!");
			}
		},
		error : function(errorMsg) {
			//请求失败时执行该函数
			alert("图表请求数据失败!");
			myChart.hideLoading();
		}
	});
</script>
</body>
</html>

结果:

猜你喜欢