首先上需求,需要饼图。
于是,看到了highcharts。上代码
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="UTF-8">
<title>工程回访统计</title>
<style>
#pic1{
width:400px;
height:400px;
margin: 20px auto;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts-3d.js"></script>
<!-- <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script> -->
<script>
$(function(){
var satisfiedNumber='<%=request.getAttribute("satisfiedNumber")%>';
var morSatisfactoryNumber='<%=request.getAttribute("morSatisfactoryNumber")%>';
var dissatisfiedNumber='<%=request.getAttribute("dissatisfiedNumber")%>';
test(satisfiedNumber,morSatisfactoryNumber,dissatisfiedNumber);
});
function test(a,b,c){
$('#pic1').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 50,
beta: 0
}
},
title: {
text: '工程回访统计满意度占比'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: '满意度统计',
data: [
['不满意', eval(c)],
['较满意', eval(b)],
{
name: '满意',
y: eval(a),
sliced: true,
selected: true
}/* ,
['Safari', 1.00],
['Opera', 6.00],
['Others', 1.00] */
]
}]
});
}
</script>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
因为我的值少,只有三个值,果断放弃json格式 以及使用ajax再次查数据,所以用了这种方式
model.addAttribute("satisfiedNumber", g.getSatisfactionDegreeNumber());
然后饼图就ok啦!上后台麻瓜代码: