echars图表的疑难杂症

<script type="text/javascript">
    layui.use(['table', 'layer', 'upload', 'laydate'], function () {
        var table = layui.table
        layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , laydate = layui.laydate;

        var series = [];

        var names=[];
        var number=[];

        form.on('submit(search)', function (data) {
            $.ajax({
                url:....,
                dataType: 'json',
                type: 'post',
                data: {classId: $("#classId").val()},
                success: function (data) {
                    series=[];
                    var data0=0,data1=0,data2=0,data3=0,data4=0,data5=0;
                    $.each(data.data, function (index, item) {
                        if (item.state == 1) {
                            data0=item.number;
                        }
                        if (item.state == 2) {
                            data1=item.number;
                        }
                        if (item.state == 3) {
                            data2=item.number;
                        }
                        if (item.state == 4) {
                            data3=item.number;
                        }
                        if (item.state == 5) {
                            data4=item.number;
                        }
                        if (item.state == 6) {
                            data5=item.number;
                        }
                    });
                    series.push(data0);
                    series.push(data1);
                    series.push(data2);
                    series.push(data3);
                    series.push(data4);
                    series.push(data5);

                    reloadPieChartData();
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
//学生考勤
        $.ajax({
            url: '....',
            dataType: 'json',
            type: 'post',
            data: {classId: $("#classId").val()},
            success: function (data) {
                series=[];
                var data0=0,data1=0,data2=0,data3=0,data4=0,data5=0;
                $.each(data.data, function (index, item) {
                    if (item.state == 1) {
                        data0=item.number;
                    }
                    if (item.state == 2) {
                        data1=item.number;
                    }
                    if (item.state == 3) {
                        data2=item.number;
                    }
                    if (item.state == 4) {
                        data3=item.number;
                    }
                    if (item.state == 5) {
                        data4=item.number;
                    }
                    if (item.state == 6) {
                        data5=item.number;
                    }
                });
                series.push(data0);
                series.push(data1);
                series.push(data2);
                series.push(data3);
                series.push(data4);
                series.push(data5);

                reloadPieChartData();
            }
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartLine'));
        function reloadPieChartData() {
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学生考勤'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                color: ['#3398DB'],
                xAxis: {
                    data: ["正常", "迟到", "早退", "缺卡", "请假", "休息"]
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: series
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
//班级学生个数
        $.ajax({
            url: ...,
            dataType: 'json',
            type: 'get',
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(data.data, function (index, item) {
                    names.push(item.class_name);    //挨个取出类别并填入类别数组
                    number.push(item.number);
                });
                reloadVChartData();
            }
        });

        // 基于准备好的dom，初始化echarts实例
        var myChartV = echarts.init(document.getElementById('chartV'));
        var option = {};
        function reloadVChartData() {
            // 指定图表的配置项和数据
            var optionV = {
                title: {
                    text: '班级人数'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                color: ['#FF7F50'],
                xAxis: {
                    data: names,
                    axisLabel: {//调整横轴倾斜度
                        interval:0,
                        rotate:'70'
                    }
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: number
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartV.setOption(optionV);
        }
        //根据类型分班
        var classNumber=[];
            $.ajax({
            url: ...,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(data.data, function (index, item) {
                         //挨个取出类别并填入类别数组
                    classNumber.push(item.number);
                });
                reloadHChartData();
            }
        });

        // 基于准备好的dom，初始化echarts实例
        var myChartH = echarts.init(document.getElementById('chartHistogram'));
        function reloadHChartData() {
            // 指定图表的配置项和数据
            var optionH = {
                title: {
                    text: '班级个数'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                color: ['#EE82EE'],
                xAxis: {
                    data: ["小班", "中班", "大班"],

                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: classNumber
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartH.setOption(optionH);
        }
        //班级个数饼图
        var brower=[];
        $.ajax({
            url: ....,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                $.each(data.data, function (index, item) {
                    var classType;
                    if (item.type==0){//获取到的type为数字时
                        classType="小班"
                    }if (item.type==1){
                        classType="中班"
                    }if (item.type==2){
                        classType="大班"
                    }
                    names.push(classType);    //挨个取出类别并填入类别数组
                    brower.push({
                        name: classType,
                        value: item.number
                    });
                });
                reloadPChartData();
            }
        });

        // 基于准备好的dom，初始化echarts实例
        var myChartP = echarts.init(document.getElementById('charPie'));
        function reloadPChartData() {
            // 指定图表的配置项和数据
            var optionP = {
                color: ['#ff7d27', '#47b73d', '#fcc36e'],
                title: {
                    text: '班级个数',
                    x:'center'
                },
                tooltip: { trigger: 'item'},
                legend: {
                    orient: 'vertical',
                    left:'10%',//图例距离图的距离
                    bottom:'280',//距离上面280
                    data: ["小班", "中班", "大班"]
                },
                series : [
                    {
                        name: '班级个数',
                        type: 'pie',
                        radius : '45%',
                        center: ['50%', '60%'],
                        data:brower,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChartP.setOption(optionP);
        }
    });
</script>
<div class="layui-fluid">
    <form id="searchForm" class="layui-form x-center" action="">
        <div class="layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">班级名称</label>
                <div class="layui-input-inline">
                    <select id="classId" name="classId" lay-verify="required">
                        #for(classInfo:classInfo)
                        <option value="#(classInfo.id)">#(classInfo.className)</option>
                        #end
                    </select>
                </div>
                <div class="layui-input-inline" style="width : 80px">
                    <button class="layui-btn" lay-submit="" lay-filter="search"><i
                            class="layui-icon">&#xe615;</i>
                    </button>
                </div>

            </div>
        </div>
    </form>
    <hr>
    <div class="layui-row">
        <div id="chartLine" style="width:40%; height: 450px;float: left"></div>
        <div id="chartV" style="width:60%; height: 450px;float: right"></div>
        <div id="chartHistogram"
             style="width:40%; height: 450px;float:left;padding-top: 50px;"></div>
        <div id="charPie" style="width:60%; height: 450px;float:right;padding-top: 50px;"></div>

    </div>
</div>