Echarts遇到问题（一）

Echarts

今天需要用Echarts接收后台json数据，但是前台展示时遇到了一点问题，在此记录，希望其他小伙伴遇到这问题后能有所帮助。
需求：后台接收json数据用Echarts扇形图展示数据。
话不多说，上代码，这里代码只粘贴部分

@RequestMapping(value = "/querySexNum.do", method = RequestMethod.GET)
    @ResponseBody
    public  List<Map<String, Object>>  querySexNum(){
        List<Map<String, Object>> maps = service.querySexNum();
        //这里是测试数据，比较简单，下面粘贴上数据
        return maps;
    }

map转为json后的数据：

[{
	"sex_number": 7,
	"sex": "女"
}, {
	"sex_number": 7,
	"sex": "未知"
}, {
	"sex_number": 17,
	"sex": "男"
}]

前台页面代码：

<script type="text/javascript" src="echarts/echarts.js" ></script>
<script type="text/javascript" src="echarts/china.js" ></script>
<div id="chartSexNum" style="height:300px;width:630px;float:left; border:1px solid #000"></div>
<script>
var chartSexNum = echarts.init(document.getElementById('chartSexNum'));
    chartSexNum.setOption({
        title: {
            text: '性别统计',
            // subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            x: 'right',
            y: 'middle',
            right: 10,
        },
        series: [{
            name: '性别',
            type: 'pie',
            data: [],
            itemStyle: {
                normal: {
                    color: function (params) {
                        // build a color map as your need.
                        var colorList = [
                            '#FE8463', '#3bb5ff', '#FAD860', '#F3A43B', '#60C0DD',
                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c}({d}%)'
                }
            },
        }]
    });
    chartSexNum.showLoading();

    $.ajax({
        url: "/analysis/querySexNum.do",
        type: 'get',
        dataType: "json",
        success: function (result) {
            if (result == null || result == '') {
                $("#chartSexNum").html("暂时无数据")
            } else {
                var sex = [];
                var sexCount = [];
                var listRestlt = result;
                //这里遍历后台接收到的json数据
                for (var i = 0; i < listRestlt.length; i++) {
                    sex.push(listRestlt[i].sex)//X轴显示内容
                    sexCount.push({
                    	//Y轴显示内容，这里sex和sex_number对应的是map的key键
                    	//Y轴需要存储X轴和Y轴显示的内容，这样Y轴才能根据X轴去找对应的Y轴数据，因为之前用的都是公司封装好的，自己再次写时没注意，这里被坑了一次
						name:listRestlt[i].sex,
						value:listRestlt[i].sex_number
					})
                }
                chartSexNum.setOption({
                    legend: {
                        bottom: 10,
                        data: sex,
                    },
                    series: {
                        // 根据名字对应到相应的系列
                        type: 'pie',
                        data: sexCount,
                    }
                });
            }
             chartSexNum.hideLoading();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#chartSexNum").html("查询失败")
        }
    })
</script>

效果如下图：

之前Y轴里没存储X轴的信息，上图标记的位置不显示，Y轴里存储了X轴的数据后，数据正常显示