schoolReportPDF/js/scoreAnalysis/section_2_lin.js

$(function () {
  // 按名次统计
  function initClassCriticalRankEcharts(r_data_item, s_index) {
    var linescore = r_data_item.linescore;
    var legend_data = [">" + linescore + "名", "≤" + linescore + "名"];
    var xAxis_data = [];
    var series_data1 = [];
    var series_data2 = [];
    $.each(r_data_item.ranks, function (index, r_item) {
      xAxis_data.push(r_item.classname);
      series_data1.push(r_item.dynum);
      series_data2.push(-r_item.xynum);
    });
    var option = {
      title: {
        text: "人",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: 12,
          fontWeight: 500,
        },
      },
      color: ["#5C99FF", "#F39A2C"],
      legend: {
        itemWidth: 6,
        itemHeight: 6,
        bottom: 30,
        data: legend_data,
      },
      grid: {
        top: 30,
        left: 5,
        right: 0,
        bottom: 65,
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          offset: 10,
          position: "bottom",
          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: [
        {
          name: legend_data[0],
          type: "bar",
          stack: "one",
          barWidth: 32,
          // 柱状图最小高度
          barMinHeight: 0,
          barGap: 0,
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "bottom",
              position: "top",
              distance: 0,
            },
          },
          data: series_data1,
        },
        {
          name: legend_data[1],
          type: "bar",
          stack: "one",
          barWidth: 32,
          // 柱状图最小高度
          barMinHeight: 0,
          barGap: 0,
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "top",
              position: "bottom",
              distance: 0,
              formatter: function (params) {
                return Math.abs(params.value);
              },
            },
          },
          data: series_data2,
        },
      ],
    };
    var myEcharts = echarts.init(
      document.querySelector(
        ".section_2_lin.section_2_lin_" + s_index + " #classCriticalRankEcharts"
      )
    );
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  // 按分数统计
  function initClassCriticalScoreEcharts(s_data_item, s_index) {
    var linescore = s_data_item.linescore;
    var legend_data = [">" + linescore + "分", "≤" + linescore + "分"];
    var xAxis_data = [];
    var series_data1 = [];
    var series_data2 = [];
    $.each(s_data_item.ranks, function (index, r_item) {
      xAxis_data.push(r_item.classname);
      series_data1.push(r_item.dynum);
      series_data2.push(-r_item.xynum);
    });
    var option = {
      title: {
        text: "人",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: 12,
          fontWeight: 500,
        },
      },
      color: ["#5C99FF", "#F39A2C"],
      legend: {
        itemWidth: 6,
        itemHeight: 6,
        bottom: 30,
        data: legend_data,
      },
      grid: {
        top: 30,
        left: 5,
        right: 0,
        bottom: 65,
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          offset: 10,
          position: "bottom",
          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: [
        {
          name: legend_data[0],
          type: "bar",
          stack: "one",
          barWidth: 32,
          // 柱状图最小高度
          barMinHeight: 0,
          barGap: 0,
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "bottom",
              position: "top",
              distance: 0,
            },
          },
          data: series_data1,
        },
        {
          name: legend_data[1],
          type: "bar",
          stack: "one",
          barWidth: 32,
          // 柱状图最小高度
          barMinHeight: 0,
          barGap: 0,
          label: {
            normal: {
              show: true,
              align: "center",
              verticalAlign: "top",
              position: "bottom",
              distance: 0,
              formatter: function (params) {
                return Math.abs(params.value);
              },
            },
          },
          data: series_data2,
        },
      ],
    };
    var myEcharts = echarts.init(
      document.querySelector(".section_2_lin.section_2_lin_" + s_index + " #classCriticalScoreEcharts")
    );
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  var parameter = $(".section_2_html_root .section_2_lin_html_root").data(
    "page-params"
  );
  parameter = JSON.parse(parameter);
  var subjectInfo = [];
  var subjectid_ranktype = {};
  for (var sid_3 in parameter[3]) {
    if (sid_3 === "zf") {
      subjectInfo.unshift({
        subjectid: sid_3,
        subjectname: "全科",
      });
    } else {
      subjectInfo.push({
        subjectid: sid_3,
        subjectname: parameter[3][sid_3].subjectname,
      });
    }
    if (!subjectid_ranktype[sid_3]) {
      subjectid_ranktype[sid_3] = {};
    }
    subjectid_ranktype[sid_3][3] = parameter[3][sid_3];
  }
  for (var sid_4 in parameter[4]) {
    if (!subjectid_ranktype[sid_4]) {
      subjectid_ranktype[sid_4] = {};
    }
    subjectid_ranktype[sid_4][4] = parameter[4][sid_4];
  }
  // console.log("subjectid_ranktype", subjectid_ranktype);
  var singleRootHtml = "";
  $.each(subjectInfo, function (s_index, s_item) {
    singleRootHtml +=
      '<div class="page_root section_2_lin section_2_lin_' +
      s_index +
      '">' +
      (s_index === 0 ? '<h2 class="section_title_2">4.临界生对比</h2>' : "") +
      '<h3 class="section_title_3">4.' +
      (s_index + 1) +
      ' <span class="subjectname"></span>临界生对比</h3><h4 class="section_title_4">4.' +
      (s_index + 1) +
      '.1 各班临界生对比分析</h4><div class="echarts_result"><div>按名次统计</div><div class="echarts_result_content"><div>临界名次：<span class="lin_rank_num c_5699FF"></span>名<span class="margin_left_6mm margin_right_6mm">浮动名次：<span class="lin_rank_float c_FF5F56"></span>名</span>名次区间：<span class="lin_rank_range c_5699FF"></span>名</div></div></div><div id="classCriticalRankEcharts" style="margin: 0 4mm 4mm; height: 120mm"></div></div><div class="page_root section_2_lin section_2_lin_' +
      s_index +
      '"><h4 class="section_title_4">4.' +
      (s_index + 1) +
      '.2 各班名次整体分析</h4><table border="1" class="my_table"><thead><tr><th>班级</th><th>人数</th><th>占比</th></tr></thead><tbody class="lin_rank_tbody"></tbody></table><div class="echarts_result"><div>上图统计结果表示：</div><div class="echarts_result_content"><div><span class="dot bg_FF5F56"></span>临界生最多的班级：<span class="lin_rank_max"></span></div></div></div></div><div class="page_root section_2_lin section_2_lin_' +
      s_index +
      '"><div class="echarts_result"><div>按分数统计</div><div class="echarts_result_content"><div>临界分：<span class="lin_score_num c_5699FF"></span>分<span class="margin_left_6mm margin_right_6mm">浮动分：<span class="lin_score_float c_FF5F56"></span>分</span>分数区间：<span class="lin_score_range c_5699FF"></span>分</div></div></div><div id="classCriticalScoreEcharts" style="margin: 0 4mm 4mm; height: 120mm"></div></div><div class="page_root section_2_lin section_2_lin_' +
      s_index +
      '"><h4 class="section_title_4">4.' +
      (s_index + 1) +
      '.3 各班分数整体分析</h4><table border="1" class="my_table"><thead><tr><th>班级</th><th>人数</th><th>占比</th></tr></thead><tbody class="lin_score_tbody"></tbody></table><div class="echarts_result"><div>上图统计结果表示：</div><div class="echarts_result_content"><div><span class="dot bg_FF5F56"></span>临界生最多的班级：<span class="lin_score_max"></span></div></div></div></div>';
  });
  $(".section_2_lin_root").html(singleRootHtml);
  $.each(subjectInfo, function (s_index, s_item) {
    var r_data_item = subjectid_ranktype[s_item.subjectid][4];
    // console.log("r_data_item", r_data_item);
    // 按名次统计
    $(".section_2_lin_" + s_index + " .subjectname").text(
      r_data_item.subjectname
    );
    $(".section_2_lin_" + s_index + " .lin_rank_num").text(
      r_data_item.linescore
    );
    $(".section_2_lin_" + s_index + " .lin_rank_float").text(
      r_data_item.floatscore
    );
    $(".section_2_lin_" + s_index + " .lin_rank_range").text(
      r_data_item.maxscore + " - " + r_data_item.minscore
    );
    initClassCriticalRankEcharts(r_data_item, s_index);
    var lin_rank_tbody_html = "";
    var linRankMaxInfo = {
      stunum: 0,
      classname: "",
    };
    $.each(r_data_item.ranks, function (index, r_item) {
      if (r_item.classid !== 0 && linRankMaxInfo.stunum < r_item.stunum) {
        linRankMaxInfo.stunum = r_item.stunum;
        linRankMaxInfo.classname = r_item.classname;
      }
      lin_rank_tbody_html +=
        '<tr><td><div class="my_cell">' +
        r_item.classname +
        '</div></td><td><div class="my_cell">' +
        r_item.stunum +
        '</div></td><td><div class="my_cell">' +
        r_item.sturate +
        "%</div></td></tr>";
    });
    $(".section_2_lin_" + s_index + " .lin_rank_tbody").html(
      lin_rank_tbody_html
    );
    $(".section_2_lin_" + s_index + " .lin_rank_max").html(
      linRankMaxInfo.classname
    );
    // 按分数统计
    var s_data_item = subjectid_ranktype[s_item.subjectid][3];
    // console.log("s_data_item", s_data_item);
    $(".section_2_lin_" + s_index + " .lin_score_num").text(
      s_data_item.linescore
    );
    $(".section_2_lin_" + s_index + " .lin_score_float").text(
      s_data_item.floatscore
    );
    $(".section_2_lin_" + s_index + " .lin_score_range").text(
      s_data_item.minscore + " - " + s_data_item.maxscore
    );
    initClassCriticalScoreEcharts(s_data_item, s_index);
    var lin_score_tbody_html = "";
    var linScoreMaxInfo = {
      stunum: 0,
      classname: "",
    };
    $.each(s_data_item.ranks, function (index, r_item) {
      if (r_item.classid !== 0 && linScoreMaxInfo.stunum < r_item.stunum) {
        linScoreMaxInfo.stunum = r_item.stunum;
        linScoreMaxInfo.classname = r_item.classname;
      }
      lin_score_tbody_html +=
        '<tr><td><div class="my_cell">' +
        r_item.classname +
        '</div></td><td><div class="my_cell">' +
        r_item.stunum +
        '</div></td><td><div class="my_cell">' +
        r_item.sturate +
        "%</div></td></tr>";
    });
    $(".section_2_lin_" + s_index + " .lin_score_tbody").html(
      lin_score_tbody_html
    );
    $(".section_2_lin_" + s_index + " .lin_score_max").html(
      linScoreMaxInfo.classname
    );
  });
});