bigData_XT/js/boardersInfo.js

// 寄宿生情况
$(function () {

    // 标题增加年份
    $('#title_text').prepend(config_now_year)

    // 渲染年份列表 在nav.js中获取select_year
    $('#select-year').append(select_year)
    $('.select').on('click', '.placeholder', function (e) {
        var parent = $(this).closest('.select');
        if (!parent.hasClass('is-open')) {
            parent.addClass('is-open');
            $('.select.is-open').not(parent).removeClass('is-open');
        } else {
            parent.removeClass('is-open');
        }
        e.stopPropagation();
    }).on('click', 'ul>li', function () {
        var parent = $(this).closest('.select');
        parent.removeClass('is-open').find('.placeholder').text($(this).text());
        $(window).attr('location', "boardersInfo.html?year=" + $(this).text());
        let on_year = $(this).text();
        echartSizeInfo(on_year);

    });


    // var data = [
    //     {name: '南关区', size: '0.50%'},
    //     {name: '宽城区', size: '0.20%'},
    //     {name: '朝阳区', size: '0.30%'},
    //     {name: '二道区', size: '0.60%'},
    //     {name: '绿园区', size: '0.10%'},
    //     {name: '双阳区', size: '0.60%'},
    //     {name: '九台区', size: '1.00%'},
    //     {name: '农安县', size: '0.20%'},
    //     {name: '经开区', size: '0.30%'},
    //     {name: '净月区', size: '0.40%'},
    //     {name: '高新区', size: '0.20%'},
    //     {name: '汽车区', size: '0.10%'},
    //     {name: '榆树市', size: '0.90%'},
    //     {name: '德惠市', size: '2.70%'},
    // ]

    var tableDate = [];

    var typeOfBe = '小学';

    $('#Syoueryuan').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '幼儿园';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Sxiaoxue').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '小学';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Schuzhong').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '初中';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Sgaozhong').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '高中';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    echartSizeInfo(config_now_year);


    function echartSizeInfo(year) {

        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A025",
                "query_param": [
                    year
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "json",
            "query_group": [
                "gatherregionc"
            ]
        }), function (resport) {

            var data = resport.result;
            var indata = JSON.parse(data);
            var nameData = [];
            var sizeData = [];


            indata.forEach((item, index) => {
                if (item.stage === typeOfBe) {

                    nameData.push(item.gatherregionc);
                    if (item.studentno == 0) {
                        sizeData.push(0);
                    } else {
                        sizeData.push(Math.round(((item.total / item.studentno).toFixed(4)) * 100));
                    }

                }
            });

            nameData.forEach((item, index) => {
                tableDate.push({
                    name: item,
                    size: `${sizeData[index]}%`,
                })
            });



            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echartBoardersInfo'));  // 寄宿生情况柱状图

            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top: '8%',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: nameData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },

                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %',
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [
                    {
                        name: '寄宿生比例',
                        type: 'bar',
                        data: sizeData,
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        label: {
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {
                            normal: {
                                color: '#168EFE',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            getTable();
        }, 'json');
    }

    function getTable() {

        $('#boardersTable').empty();
        $('#boardersTable').append(
            '<tr style="line-height: 0.35rem;"><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 15%; background: #0044bb;">序号</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 30%; background: #0044bb;">县域名称</th><th style="text-align: center; color: #fff; width: 54%; background: #0044bb;">寄宿生比例</th></tr>'
        )

        tableDate.forEach((item, index) => {
            var newIndex = index + 1;
            $('#boardersTable').append(
                "<tr style='line-height: 0.35rem; border-bottom: 1px solid rgba(255,255,255,.2)'><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 15%;'>" + newIndex + "</td><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 35%;'>" + item.name + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 49%;'>" + item.size + "</td></tr>"
            )
        })

    }

})