java利用插件echarts动态制作饼图

一：页面部分

     <div id="circle">
<div>
<span>男女分布比例图</span>
</div>
<div id="main1"
style="width: 600px; height: 400px; background-color: black;"></div>
</div>

<script type="text/javascript">
//男女饼图
var myChart1 = echarts.init(document.getElementById('main1'));
option1 = {
backgroundColor: '#ccc',//背景色
   title : {
       text: '男女人数统计饼图',
       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}
       }
   },
   calculable : true,
   series : [
       {
           name:'访问来源',
           type:'pie',
           radius : '55%',
           center: ['50%', '60%'],
           data:[
           ]
       }
   ]
};
myChart1.setOption(option1);
$.ajax({
url : "/echarts/sexPie",
type : "post",
dataType : "json",
success : function(result) {
if (result) {
myChart1.setOption({
series:[{
data:result
}]
});
}
}
});

</script>

二：代码部分

public void sexPie() {
Object obj = EchartsService.me.sexPie();
renderJson(JsonKit.toJson(obj));
}

public Object sexPie() {
String date = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
String begin = date + " 00:00:01";
String end = date + " 23:59:59";
String sql = "select sex name, count(*) value from sport_records s INNER JOIN users u on s.user_id=u.id  WHERE s.arrived_time>=? and s.arrived_time <=? GROUP BY sex";
List<Record> list = Db.find(sql, begin, end,);
for (int i = 0; i < list.size(); i++) {
if (list.get(i).getInt("name") == 1) {
list.get(i).set("name", "男");
} else if (list.get(i).getInt("name") == 2) {
list.get(i).set("name", "女");
} else {
list.get(i).set("name", "未知");
}
}
return list;
}

三：返回数据

[{"name":"未知","value":34},{"name":"男","value":223},{"name":"女","value":125}]

四：效果图