echarts饼状显示数据性别百分比

记一次前端页面对echarts的使用（数据分析之性别分布饼状图）

一、echarts是什么？
建议网页查找含义，你知道你想要干什么就行了

二、使用步骤
1.引入

2.上代码，很简单。

    function piedata1() {
        $.ajax({
            url: "http://110.120.30.3636/bigData/sexData",
            data: {”**“： ** }, //接口传参
            dataType: 'json',//服务器返回json格式数据
            type: 'GET',//HTTP请求类型
            success: function (res) {
                if (res.code == 200 && res.data.length > 0) {
                    var manDate = 0;  //男
                    var womanDate = 0; //女
                    var unKnown = 0;//未知
                    res.data.forEach(function (e, i) {
                        if (e.sex == '男') {
                            manDate = manDate + e.num;
                        } else if (e.sex == '女') {
                            womanDate = womanDate + e.num;
                        } else if (e.sex == '') {
                            unKnown = unKnown + e.num;
                        }
                    })
                    var chart = echarts.init(document.getElementById('pie-chart1'))  //初始化echarts
                    var option = {                                                        //设置格式
                        title: {
                            text: '性别分布', //主题
                            textStyle: {
                                color: '#fff',  //主题颜色
                                fontSize: '14'
                            },
                            left: 'center',
                            top: 'bottom'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        //数据响应模型 填充数据
                        series: [
                            {
                                name: '性别分布',
                                type: 'pie', //模型类型
                                radius: ['10%', '50%'],
                                center: ['50%', '40%'],
                                roseType: 'area',
                                data: [{value: manDate, name: '男'},
                                    {value: womanDate, name: '女'},
                                    {value: unKnown, name: '未记录'},
                                ],
                                labelLine: {
                                    length: 5,
                                    length2: 0,
                                },
                            }
                        ],
                        color: ['#55ff00', '#ff0000', '#ecff1a'],//响应颜色
                        label: {
                            fontSize: 10,
                            textBorderWidth: 0,
                            textBorderColor: 'transparent',
                            color: '#fff'
                        },
                    };
                    chart.setOption(option);  //填充
                }
                console.log(res);
            }
        });

    }

    大家可借鉴参考，希望可以解决你遇到的一些类似需求或者问题，本身不是做前端的，样式效果不是很满意的话[借鉴](http://echarts.zhangmuchen.top/#/index)