schoolReportPDF/js/section_4.js

$(function () {
  function initSubjectGoodEcharts(xAxis_data, series_data) {
    var option = {
      animation: false,
      title: {
        text: "人",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500,
        },
      },
      color: ["#5C99FF"],
      legend: {
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: ["优秀人数"],
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: xAxis_data,
          axisLabel: {
            color: "#5F6E82", //更改坐标轴文字颜色
            interval: 0
          },
          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: [
        {
          name: "优秀人数",
          type: "bar",
          barWidth: $.UnitUtil.mm2px(5),
          // 柱状图最小高度
          barMinHeight: $.UnitUtil.mm2px(2),
          barGap: 0,
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "bottom",
              position: "top",
              distance: 0,
              formatter: "{c}",
            },
          },
          data: series_data,
        },
      ],
    };
    var myEcharts = echarts.init(document.querySelector(".section_4 #subjectGoodEcharts"));
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  var parameter = $(".section_4_html_root").data("page-params");
  parameter = JSON.parse(parameter);
  var subjectid_subjectname = {};
  var subjectid_num = {};
  var classes = [];
  parameter = $.map(parameter, function(paraItem) {
    paraItem.subjectjson = paraItem.subjectjson ? JSON.parse(paraItem.subjectjson) : [];
    var subjects = {};
    var class_num = 0;
    $.each(paraItem.subjectjson, function(index, subjectItem) {
      subjectid_subjectname[subjectItem.subjectid] = subjectItem.subjectname;
      if (subjectid_num[subjectItem.subjectid]) {
        subjectid_num[subjectItem.subjectid] += subjectItem.num;
      } else {
        subjectid_num[subjectItem.subjectid] = subjectItem.num;
      }
      subjects[subjectItem.subjectid] = {
        num: subjectItem.num,
        nrate: subjectItem.nrate,
      };
      class_num += subjectItem.num;
    });
    classes.push({
      classid: paraItem.classid,
      classname: paraItem.classname,
      class_num: class_num,
      subjects: subjects
    });
    return paraItem;
  });
  var xAxis_data = [];
  var series_data = [];
  var maxSubjectInfo = {
    num: 0,
    subjectname: ""
  };
  var goodTableHeadTr1Html = '<th rowspan="2">班级</th>';
  var goodTableHeadTr2Html = '';
  for (var subjectid in subjectid_subjectname) {
    xAxis_data.push(subjectid_subjectname[subjectid]);
    series_data.push(subjectid_num[subjectid]);
    if(maxSubjectInfo.num < subjectid_num[subjectid]) {
      maxSubjectInfo = {
        num: subjectid_num[subjectid],
        subjectname: subjectid_subjectname[subjectid]
      };
    }
    // class="w29mm"
    goodTableHeadTr1Html += '<th colspan="2">' + subjectid_subjectname[subjectid] + '</th>';
    goodTableHeadTr2Html += '<th>人数</th><th>比例</th>';
  }
  $(".section_4 .subjectGoodMaxNum").text(maxSubjectInfo.subjectname);
  initSubjectGoodEcharts(xAxis_data, series_data);
  var maxClassInfo = {
    num: 0,
    classname: ""
  };
  var goodTableTbodyHtml = "";
  for (var i = 0; i < classes.length; i++) {
    var classItem = classes[i];
    var trHtml = '<td><div class="my_cell">' + classItem.classname + '</div></td>'
    if (maxClassInfo.num < classItem.class_num) {
      maxClassInfo = {
        num: classItem.class_num,
        classname: classItem.classname
      };
    }
    for (var subjectid in subjectid_subjectname) {
      series_data.push(subjectid_num[subjectid]);
      trHtml += '<td><div class="my_cell">' + (classItem.subjects[subjectid].num || 0) + '</div></td><td><div class="my_cell">' + (classItem.subjects[subjectid].nrate || 0) + '%</div></td>'
    }
    goodTableTbodyHtml += '<tr>' + trHtml + '</tr>';
  }
  $(".section_4 .classGoodMaxNum").text(maxClassInfo.classname);
  $(".section_4 .goodTableHeadTr1").html(goodTableHeadTr1Html);
  $(".section_4 .goodTableHeadTr2").html(goodTableHeadTr2Html);
  $(".section_4 .goodTableTbody").html(goodTableTbodyHtml);
});