schoolReportPDF/js/section_1.js

$(function () {
  function initAverageScoreEcharts(list,xAxis_data) {
    var itemStyle = {
      normal: {
        label: {
          show: true, //开启显示数值
          position: "top" //数值在上方显示
        }
      }
    };
    var score=[],maxscore=[],minscore=[],avgscore=[];
    var curlegend = ["满分", "最高分", "最低分", "平均分"];
    for(var i=0;i<list.length;i++){
      var item = list[i];
      score.push(item.score);
      maxscore.push(item.maxscore);
      minscore.push(item.minscore);
      avgscore.push(item.avgscore);
    } 
    var curseries = [{
      name: "满分",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: score,
      itemStyle: itemStyle
    },
    {
      name: "最高分",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: maxscore,
      itemStyle: itemStyle
    },
    {
      name: "最低分",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: minscore,
      itemStyle: itemStyle
    },
    {
      name: "平均分",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: avgscore,
      itemStyle: itemStyle
    }
    ];
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
      title: {
        text: "分",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      legend: {
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: curlegend
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [{
        type: "category",
        data: xAxis_data,
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        },
        axisTick: {
          alignWithLabel: true
        },
        boundaryGap: true,
        triggerEvent: true,
        axisLine: {
          show: true, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        }
      }],
      yAxis: [{
        type: "value",
        axisTick: {
          show: false //刻度
        },
        axisLine: {
          show: false, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true //隐藏或显示
        },
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        }
      }],
      series: curseries
    };
    var myEcharts = echarts.init($(".section1 #averagescoreEcharts")[0]);
    myEcharts.clear();
    myEcharts.setOption(option);
  }

  function initExcellenceRateEcharts(list,xAxis_data) {
    var itemStyle = {
      normal: {
        label: {
          show: true, //开启显示数值
          position: "top" //数值在上方显示
        }
      }
    };
    var yxrate=[],lhrate=[],jgrate=[],dfrate=[];
    var curlegend = ["优秀率", "良好率", "及格率", "低分率"];
    for(var i=0;i<list.length;i++){
      var item = list[i];
      yxrate.push(item.yxrate);
      lhrate.push(item.lhrate);
      jgrate.push(item.jgrate);
      dfrate.push(item.dfrate);
    }
    var curseries = [
      {
      name: "优秀率",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: yxrate,
      itemStyle: itemStyle
    },
    {
      name: "良好率",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: lhrate,
      itemStyle: itemStyle
    },
    {
      name: "及格率",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: jgrate,
      itemStyle: itemStyle
    },
    {
      name: "低分率",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: dfrate,
      itemStyle: itemStyle
    }
    ];
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
      title: {
        text: "分",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      legend: {
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: curlegend
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [{
        type: "category",
        data: xAxis_data,
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        },
        axisTick: {
          alignWithLabel: true
        },
        boundaryGap: true,
        triggerEvent: true,
        axisLine: {
          show: true, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        }
      }],
      yAxis: [{
        type: "value",
        axisTick: {
          show: false //刻度
        },
        axisLine: {
          show: false, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true //隐藏或显示
        },
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        }
      }],
      series: curseries
    };
    var myEcharts = echarts.init($(".section1 #excellencerateEcharts")[0]);
    myEcharts.clear();
    myEcharts.setOption(option);
  }

  function initExamnumEcharts(list,xAxis_data) {
    var itemStyle = {
      normal: {
        label: {
          show: true, //开启显示数值
          position: "top" //数值在上方显示
        }
      }
    };
    var stunum = [],missnum=[];
    var curlegend = ["实考人数", "缺考人数"];
    for(var i=0;i<list.length;i++){
      var item = list[i];
      stunum.push(item.stunum);
      missnum.push(item.missnum);
    }
    var curseries = [{
      name: "实考人数",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: stunum,
      itemStyle: itemStyle
    },
    {
      name: "缺考人数",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: missnum,
      itemStyle: itemStyle
    }
    ];
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
      title: {
        text: "分",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      legend: {
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: curlegend
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [{
        type: "category",
        data: xAxis_data,
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        },
        axisTick: {
          alignWithLabel: true
        },
        boundaryGap: true,
        triggerEvent: true,
        axisLine: {
          show: true, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        }
      }],
      yAxis: [{
        type: "value",
        axisTick: {
          show: false //刻度
        },
        axisLine: {
          show: false, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true //隐藏或显示
        },
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        }
      }],
      series: curseries
    };
    var myEcharts = echarts.init($(".section1 #examnumEcharts")[0]);
    myEcharts.clear();
    myEcharts.setOption(option);
  }

  function initbzcEcharts(list,xAxis_data) {
    var itemStyle = {
      normal: {
        label: {
          show: true, //开启显示数值
          position: "top" //数值在上方显示
        }
      }
    };
    var bzc = [];
    var curlegend = ["标准差"];
    for(var i=0;i<list.length;i++){
      var item = list[i];
      bzc.push(item.bzc);
    }
    var curseries = [{
      name: "标准差",
      type: "bar",
      barWidth: $.UnitUtil.mm2px(5),
      // 柱状图最小高度
      barMinHeight: $.UnitUtil.mm2px(2),
      barGap: 0,
      data: bzc,
      itemStyle: itemStyle
    }];
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
      title: {
        text: "分",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      legend: {
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: curlegend
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [{
        type: "category",
        data: xAxis_data,
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        },
        axisTick: {
          alignWithLabel: true
        },
        boundaryGap: true,
        triggerEvent: true,
        axisLine: {
          show: true, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        }
      }],
      yAxis: [{
        type: "value",
        axisTick: {
          show: false //刻度
        },
        axisLine: {
          show: false, //是否显示轴线
          lineStyle: {
            color: "#DADADA" //刻度线的颜色
          }
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
          },
          show: true //隐藏或显示
        },
        axisLabel: {
          color: "#5F6E82" //更改坐标轴文字颜色
        }
      }],
      series: curseries
    };
    var myEcharts = echarts.init($(".section1 #bzcEcharts")[0]);
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  var parameter = JSON.parse($(".section_1_html_root").data("page-params"));
  $(".section1 .classnum").text(parameter.classnum);
  $(".section1 .stunum").text(parameter.stunum);
  $(".section1 .missnum").text(parameter.missnum);
  $(".section1 .subjectnum").text(parameter.subjectnum);
  $(".section1 .maxscore").text(parameter.maxscore);
  $(".section1 .avgscore").text(parameter.avgscore);
  $(".section1 .mixscore").text(parameter.mixscore);
  var xAxis_data = [],html = "";
  var mfclass = {
    num: 0,
    classname: ""
  },yxclass = {
    num: 0,
    classname: ""
  },jgclass = {
    num: 100,
    classname: ""
  },skclass = {
    num: 0,
    classname: ""
  },qkclass = {
    num: 0,
    classname: ""
  };
  for(var i=0;i<parameter.subjects.length;i++){
    var item = parameter.subjects[i];
    if(item.subjectname == "总分"){
      item.subjectname = "全部班级";
    }else{
      if (mfclass.num < item.score) {
        mfclass = {
          num: item.score,
          classname: item.subjectname
        };
      }
      if (yxclass.num < item.yxrate) {
        yxclass = {
          num: item.yxrate,
          classname: item.subjectname
        };
      }
      if (jgclass.num > item.jgrate) {
        jgclass = {
          num: item.jgrate,
          classname: item.subjectname
        };
      }
      if (skclass.num < item.stunum) {
        skclass = {
          num: item.stunum,
          classname: item.subjectname
        };
      }
      if (qkclass.num < item.missnum) {
        qkclass = {
          num: item.missnum,
          classname: item.subjectname
        };
      }
      html += '<tr><td><div class="my_cell">'+(item.subjectname ||0)+
      '</div></td><td><div class="my_cell">'+(item.stunum ||0)+
      '</div></td><td><div class="my_cell">'+(item.missnum ||0)+
      '</div></td><td><div class="my_cell">'+(item.score ||0)+
      '</div></td><td><div class="my_cell">'+(item.maxscore ||0)+
      '</div></td><td><div class="my_cell">'+(item.minscore ||0)+
      '</div></td><td><div class="my_cell">'+(item.avgscore ||0)+
      '</div></td><td><div class="my_cell">'+(item.yxrate ||0)+'%'+
      '</div></td><td><div class="my_cell">'+(item.lhrate ||0)+'%'+
      '</div></td><td><div class="my_cell">'+(item.jgrate ||0)+'%'+
      '</div></td><td><div class="my_cell">'+(item.dfrate ||0)+'%'+
      '</div></td><td><div class="my_cell">'+(item.bzc ||0)+
      '</div></td></tr>'
    }
    xAxis_data.push(item.subjectname);
  }
  $(".section1 .mfclass").text(mfclass.classname);
  $(".section1 .yxclass").text(yxclass.classname);
  $(".section1 .jgclass").text(jgclass.classname);
  $(".section1 .skclass").text(skclass.classname);
  $(".section1 .qkclass").text(qkclass.classname);
  $(".section1 .tbody").html(html);
  initAverageScoreEcharts(parameter.subjects,xAxis_data);
  initExcellenceRateEcharts(parameter.subjects,xAxis_data);
  initExamnumEcharts(parameter.subjects,xAxis_data);
  initbzcEcharts(parameter.subjects,xAxis_data);
});