@{
    ViewBag.Title = "学生学籍统计";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<h2 style="text-align:center">学生学籍统计</h2>
<div style="padding: 20px; padding-top: 50px; display: flex; flex-wrap: wrap;">
    <div id="Sex" style="height:500px;width:50%"></div>
    <div id="nation" style="height: 500px; width: 50%"></div>
    <div id="major" style="height: 500px; width: 50%"></div>
    <div id="origin" style="height: 500px; width: 50%"></div>
</div>
<script src="~/Content/echarts/echarts.js"></script>
<style>
    body{
        overflow-y:scroll
    }
</style>
@Html.AppendJsFile("/Areas/EducationalAdministration/Views/StuInfoBasicStatstics/Index.js")
<script>
    var bootstrap = function ($, learun) {
        "use strict";
        $.ajax({
            url: top.$.rootUrl + '/EducationalAdministration/StuInfoBasicStatstics/GetStatistics',
            type: "GET",
            dataType: "json",
            async: true,
            success: function (res) {
                InitSex(res.data.XB)
                InitNation(res.data.MZ)
                InitMajor(res.data.ZY)
                InitOrgin(res.data.SYD)
            }
        })
    }
    function InitOrgin(data) {
        var chartDom = document.getElementById('origin');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '生源地统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.map(item => item.name == null ? "无数据" : item.name),
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.map(item => item.value),//[10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };

        option && myChart.setOption(option);
    }
    function InitSex(data) {
        var chartDom = document.getElementById('Sex');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '性别统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }
    function InitNation(data) {
        var chartDom = document.getElementById('nation');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '民族统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.map(item => item.name == null ?"无民族":item.name),//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.map(item => item.value),//[10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };

        option && myChart.setOption(option);
    }
    function InitMajor(data) {
        var chartDom = document.getElementById('major');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '专业统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.map(item => item.name == null ?"无专业":item.name),//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval: 0,
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.map(item => item.value),//[10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };

        option && myChart.setOption(option);
    }
</script>