schoolReportPDF/js/scoreAnalysis/section_2_level.js

$(function () {
  //各班等级分析
  function initclassLevelEcharts(s_index, list) {
    var xAxis_data = [],
      series_data = [],
      legend_data = [],
      levelRateObj = {},
      levelNumObj = {},
      levelrangeObj = [];
    $.each(list, function (key, item) {
      if ($.inArray(item.classname, xAxis_data) == -1) {
        xAxis_data.push(item.classname);
      }
      if ($.inArray(item.rankname + "类", legend_data) == -1) {
        legend_data.push(item.rankname + "类");
      }
      if ($.inArray(item.rankrange, levelrangeObj) == -1) {
        levelrangeObj.push(item.rankrange);
      }
      if (!levelRateObj[item.rankname + "类"]) {
        levelRateObj[item.rankname + "类"] = [];
      }
      levelRateObj[item.rankname + "类"].push(item.sturate);
      if (!levelNumObj[item.rankname + "类"]) {
        levelNumObj[item.rankname + "类"] = [];
      }
      levelNumObj[item.rankname + "类"].push(item.stunum);
    });
    $.each(legend_data, function (key, item) {
      series_data.push({
        name: item,
        type: "bar",
        stack: "总量",
        barWidth: 32,
        // 柱状图最小高度
        barMinHeight: 16,
        showBackground: true, // 柱状图显示背景
        backgroundStyle: {
          color: "#F3F4F5"
        },
        itemStyle: {
          normal: {
            barBorderRadius: [4, 4, 4, 4]
          }
        },
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "middle",
            position: "inside",
            distance: 0,
            color: "#fff",
            formatter: function (params) {
              return levelNumObj[params.seriesName][params.dataIndex] || 0;
            }
          }
        },
        data: levelNumObj[item]
      });
    });
    showgraphicaldata(xAxis_data, legend_data, levelrangeObj, s_index, list);
    var option = {
      color: ["#5C99FF", "#ff5f56", "#5EC5C8", "#f1982b", "#6e5eff"],
      animation: false,
      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: legend_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: series_data
    };
    var myEcharts = echarts.init(
      $(
        ".section_2_level.level_" + s_index + " #classLevelEcharts"
      )[0]
    );
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  //图表数据
  function showgraphicaldata(
    xAxis_data,
    legend_data,
    levelrangeObj,
    s_index,
    list
  ) {
    //图表数据
    var arr = JSON.parse(JSON.stringify(list));
    var goodTableHeadTr1Html = '<th rowspan="2">班级</th>';
    var goodTableHeadTr2Html = "";
    var goodTableTbodyHtml = "";
    $.each(legend_data, function (idx, item) {
      goodTableHeadTr1Html +=
        '<th colspan="2">' + item + levelrangeObj[idx] + "</th>";
      goodTableHeadTr2Html += "<th>人数</th><th>比例</th>";
    });
    $.each(xAxis_data, function (idx, item) {
      var trHtml = '<td><div class="my_cell">' + item + "</div></td>";
      var classs = $.grep(arr, function (val) {
        return val.classname == item;
      });
      $.each(legend_data, function (idx, item) {
        var rank = $.grep(classs, function (val) {
          return val.rankname + "类" == item;
        })[0];
        trHtml +=
          '<td><div class="my_cell">' +
          rank.stunum +
          '</div></td><td><div class="my_cell">' +
          rank.sturate +
          "%</div></td>";
      });
      goodTableTbodyHtml += "<tr>" + trHtml + "</tr>";
    });
    $(".section_2_level.level_" + s_index + " .goodTableHeadTr1").html(
      goodTableHeadTr1Html
    );
    $(".section_2_level.level_" + s_index + " .goodTableHeadTr2").html(
      goodTableHeadTr2Html
    );
    $(".section_2_level.level_" + s_index + " .goodTableTbody").html(
      goodTableTbodyHtml
    );
    var totalObj = {};
    var maxObj = {};
    var minObj = {};
    var classObj = {};
    $.each(list, function (index, listItem) {
      if (!totalObj[listItem.rankname]) {
        totalObj[listItem.rankname] = {};
      }
      if (!maxObj[listItem.rankname]) {
        maxObj[listItem.rankname] = {
          stunum: 0,
          classidArr: []
        };
      }
      if (listItem.classid === 0) {
        totalObj[listItem.rankname].stunum = listItem.stunum;
        totalObj[listItem.rankname].sturate = listItem.sturate;
      } else {
        classObj[listItem.classid] = listItem.classname;
        if (maxObj[listItem.rankname].stunum < listItem.stunum) {
          maxObj[listItem.rankname].stunum = listItem.stunum;
          maxObj[listItem.rankname].classidArr = [listItem.classid];
        } else if (maxObj[listItem.rankname].stunum === listItem.stunum) {
          maxObj[listItem.rankname].classidArr.push(listItem.classid);
        }
      }
    });
    $.each(list, function (index, listItem) {
      if (!minObj[listItem.rankname]) {
        minObj[listItem.rankname] = {
          stunum: maxObj[listItem.rankname].stunum,
          classidArr: []
        };
      }
      if (listItem.classid !== 0) {
        if (minObj[listItem.rankname].stunum > listItem.stunum) {
          minObj[listItem.rankname].stunum = listItem.stunum;
          minObj[listItem.rankname].classidArr = [listItem.classid];
        } else if (minObj[listItem.rankname].stunum === listItem.stunum) {
          minObj[listItem.rankname].classidArr.push(listItem.classid);
        }
      }
    });
    $(".section_2_level.level_" + s_index + " .result_collect").text(
      "A类" +
        totalObj["A"].stunum +
        "人（" +
        totalObj["A"].sturate +
        "%），B类" +
        totalObj["B"].stunum +
        "人（" +
        totalObj["B"].sturate +
        "%），C类" +
        totalObj["C"].stunum +
        "人（" +
        totalObj["C"].sturate +
        "%），D类" +
        totalObj["D"].stunum +
        "人（" +
        totalObj["D"].sturate +
        "%），E类" +
        totalObj["E"].stunum +
        "人（" +
        totalObj["E"].sturate +
        "%）"
    );
    $(".section_2_level.level_" + s_index + " .A_collect").text(
      "A类上线率最高的班级：" +
        $.map(maxObj["A"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、") +
        "，A类上线率最低的班级：" +
        $.map(minObj["A"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、")
    );

    $(".section_2_level.level_" + s_index + " .B_collect").text(
      "B类上线率最高的班级：" +
        $.map(maxObj["B"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、") +
        "，B类上线率最低的班级：" +
        $.map(minObj["B"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、")
    );

    $(".section_2_level.level_" + s_index + " .C_collect").text(
      "C类上线率最高的班级：" +
        $.map(maxObj["C"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、") +
        "，C类上线率最低的班级：" +
        $.map(minObj["C"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、")
    );

    $(".section_2_level.level_" + s_index + " .D_collect").text(
      "D类上线率最高的班级：" +
        $.map(maxObj["D"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、") +
        "，D类上线率最低的班级：" +
        $.map(minObj["D"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、")
    );

    $(".section_2_level.level_" + s_index + " .E_collect").text(
      "E类上线率最高的班级：" +
        $.map(maxObj["E"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、") +
        "，E类上线率最低的班级：" +
        $.map(minObj["E"].classidArr, function (classid) {
          return classObj[classid];
        }).join("、")
    );
  }
  var parameter = $(".section_2_html_root .section_2_level_html_root").data(
    "page-params"
  );
  parameter = JSON.parse(parameter);
  // console.log(parameter);
  var subjectInfo = [];
  for (var sid in parameter) {
    if (sid === "zf") {
      subjectInfo.unshift({
        subjectid: sid,
        subjectname: "全科",
        ranks: parameter[sid].ranks
      });
    } else {
      subjectInfo.push({
        subjectid: sid,
        subjectname: parameter[sid].subjectname,
        ranks: parameter[sid].ranks
      });
    }
  }
  var singleRootHtml = "";
  $.each(subjectInfo, function (s_index, s_item) {
    singleRootHtml +=
      '<div class="page_root section_2_level level_' +
      s_index +
      '">' +
      (s_index === 0 ? '<h2 class="section_title_2">2.分数等级对比</h2>' : "") +
      '<h3 class="section_title_3">2.' +
      (s_index + 1) +
      " " +
      s_item.subjectname +
      '等级对比</h3><h4 class="section_title_4">2.' +
      (s_index + 1) +
      '.1 各班等级分析</h4><div id="classLevelEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div><h4 class="section_title_4">2.' +
      (s_index + 1) +
      '.2 各班等级比例分布</h4><table border="1" class="my_table"><thead><tr class="goodTableHeadTr1"></tr><tr class="goodTableHeadTr2"></tr></thead><tbody class="goodTableTbody"></tbody></table><div class="echarts_result"><div>上图各等级上线统计结果为：<span class="result_collect"></span>：</div><div class="echarts_result_content"><div><span class="bg_5699FF"></span><i class="A_collect"></i></div><div><span class="bg_FF5F56"></span><i class="B_collect"></i></div><div><span class="bg_5EC5C8"></span><i class="C_collect"></i></div><div><span class="bg_F1982B"></span><i class="D_collect"></i></div><div><span class="bg_F1982B"></span><i class="E_collect"></i></div></div></div></div>';
  });
  $(".section_2_level_root").html(singleRootHtml);
  $.each(subjectInfo, function (s_index, s_item) {
    initclassLevelEcharts(s_index, s_item.ranks);
  });
});