master

Branches (1)

Manage

Manage

master

sevomafor
/
teacher.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body>
    <div class="row">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="col-lg-8">
                <div class="ibox">
                    <div class="btn-group" id="btng">
<!--                         <button type="button" class="btn btn-default active">2012</button>
                        <button type="button" class="btn btn-default">2013</button>
                        <button type="button" class="btn btn-default">2014</button>
                        <button type="button" class="btn btn-default">2015</button>
                        <button type="button" class="btn btn-default">2016</button> -->
                    </div>
                    <div class="ibox-title">
                        <p id="setyear">2012</p>
                        <div class="ibox-tools">
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="gnumber" style="height: 600px;"></div>
                        <div class="cnull" id="cnull">暂无数据</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="plugins/waves-0.7.5/waves.min.js"></script>
<script src="js/echarts.min.js"></script>

<script type="text/javascript">
    var numdata = [];
    var year = "2012";
    var majorName = "";
    var gnumber = "";
    var option = "";
    var i = 0;
    var ajaxurl = 'http://118.24.115.242:8888/';
    //请求数据
    getjson();
    function getjson(){
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: ajaxurl+'major/data/majorNum?year='+year+'&param=4',
            success: function(data){
                if (data.data[0].num.length != 0){
                    $('#gnumber').css('display', 'block');
                    $('#cnull').css('display', 'none');
                    var num = data.data[0].num;
                    majorName = data.data[0].majorName;

                    //转化为键值对
                    for(let i=0; i<num.length; i++){
                        var datas = {value: num[i], name: majorName[i]};
                        numdata.push(datas);
                    }
                    console.log(numdata);
                    //画图
                    setpic();
                }else {
                    console.log('暂无数据');
                    $('#gnumber').css('display', 'none');
                    $('#cnull').css('display', 'flex');
                }
            }
        });

        // 请求年份
        $.ajax({
            url: ajaxurl+'major/year',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function(object){
                yearlist = object.data[0];
                console.log(yearlist);
            }
        });
    }


    function setpic(){
        //图
        gnumber = echarts.init(document.getElementById('gnumber'));
        option = {
            title : {
                text: '专业教师数概览',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                show: true,
                x: 'left',
                data: majorName,
                selected: {
                    '交通运输类': false,
                    '财经商贸类': false,
                    '石油化工类': false,
                    '司法服务类': false,
                    '体育与健身': false,
                    '土木水利类': false,
                    '文化艺术类': false,
                    '信息技术类': false,
                    '休闲保健类': false,
                    '医药卫生类': false,
                    '资源环境类': false,
                }
            },
            series : [
                {
                    name: '教师数',
                    type: 'pie',
                    radius : '55%',
                    data: numdata,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        gnumber.setOption(option, true);
    }


    addButton();
    function addButton(){
        var btng = $('#btng');
        for(let i=0; i<yearlist.length; i++){
            var time = 2012+i
            btng.append('<button type="button" class="btn btn-default">'+ time +'</button>')
        }
        console.log(yearlist)
    }

    // 按钮组
    var oDiv = document.getElementById('btng');
    var aBtn = oDiv.getElementsByTagName('button');
    var oD = document.getElementById('gnumber');
    for(let i=0; i<aBtn.length; i++){
        aBtn[i].index = i;
        aBtn[i].onclick = function(){
            for (let i=0; i<aBtn.length; i++) {
                aBtn[i].className = 'btn btn-default';
            }
            clearn();
            //设置年份
            year = 2012+i;
            // 修改标题年份
            $('#setyear').text(2012+i);
            //重新获取数据
            getjson();
            gnumber.setOption(option, true);
            this.className = "btn btn-default active";
        }
    }

    //清除数据
    function clearn(){
        majorName = null;
        numdata = [];
        option = null;
        gnumber.clear();
    }
</script>


</html>