jeesite使用Highcharts实现简单3D饼图

首先上需求，需要饼图。

于是，看到了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>

$(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啦！上后台麻瓜代码：

jeesite使用Highcharts实现简单3D饼图

猜你喜欢