继上一篇博文: 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>
结果: