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(document.querySelector(".section_2_level.level_" + s_index + " #classLevelEcharts"));
    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);
  });
});