schoolReportPDF/js/scoreAnalysis/section_2_excellent.js

$(function () {
  // 优秀生、学困生统计
  function initClassExcellenceEcharts(r_data_item, s_index) {
    var legend_data = ["优秀生", "学困生"];
    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.stujson[0].stunum);
      series_data2.push(-r_item.stujson[1].stunum);
    });
    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_excellent.section_2_excellent_" + s_index + " #classExcellenceEcharts"));
    myEcharts.clear();
    myEcharts.setOption(option);
  }
  var parameter = $(".section_2_html_root .section_2_excellent_html_root").data("page-params");
  parameter = JSON.parse(parameter);
  // console.log(".section_2_excellent_html_root:parameter", parameter);
  var subjectInfo = [];
  for (var sid in parameter) {
    if (sid === "zf") {
      subjectInfo.unshift({
        subjectid: sid,
        subjectname: "全科",
      });
    } else {
      subjectInfo.push({
        subjectid: sid,
        subjectname: parameter[sid].subjectname,
      });
    }
  }
  var singleRootHtml = "";
  $.each(subjectInfo, function (s_index, s_item) {
    singleRootHtml += '<div class="page_root section_2_excellent section_2_excellent_' + s_index + '">' + (s_index === 0 ? '<h2 class="section_title_2">5. 优秀生、学困生对比</h2>' : "") + '<h3 class="section_title_3">5.' + (s_index + 1) + ' <span class="subjectname"></span>优秀生、学困生对比</h3><h4 class="section_title_4">5.' + (s_index + 1) + '.1 各班的优秀生、学困生对比</h4><div class="echarts_result">优秀生：年级前<span class="c_5699FF excellent_linescore"></span>名<span class="margin_left_6mm">学困生：年级后<span class="c_5699FF excellent_floatscore"></span>名</span></div><div id="classExcellenceEcharts" style="margin: 0 4mm 4mm;height: 120mm;"></div></div><div class="page_root section_2_excellent section_2_excellent_' + s_index + '"><h4 class="section_title_4">5.' + (s_index + 1) + '.2 各班优秀生、学困生占比分布</h4><table border="1" class="my_table"><thead><tr><th>班级</th><th class="linescore_num"></th><th>占比</th><th class="floatscore_num">后10名</th><th>占比</th></tr></thead><tbody class="excellent_rank_tbody"></tbody></table><div class="echarts_result"><div>上图统计结果表示：</div><div class="echarts_result_content"><div><span class="dot bg_5699FF"></span>年级<span class="linescore_num"></span>优秀生最多的班级：<span class="excellent_rank_good"></span></div><div><span class="dot bg_FF5F56"></span>年级<span class="floatscore_num"></span>学困生最多的班级：<span class="excellent_rank_bad"></span></div></div></div></div>';
  });
  $(".section_2_excellent_root").html(singleRootHtml);
  $.each(subjectInfo, function (s_index, s_item) {
    var r_data_item = parameter[s_item.subjectid];
    // console.log("r_data_item", r_data_item);
    $(".section_2_excellent_" + s_index + " .subjectname").text(
      r_data_item.subjectname
    );
    $(".section_2_excellent_" + s_index + " .excellent_linescore").text(
      r_data_item.linescore
    );
    $(".section_2_excellent_" + s_index + " .excellent_floatscore").text(
      r_data_item.floatscore
    );
    initClassExcellenceEcharts(r_data_item, s_index);
    var excellent_rank_tbody_html = "";
    // 优秀生最多的班级
    var goodClassInfo = {
      stunum: 0,
      classname: "",
    };
    // 学困生最多的班级
    var badClassInfo = {
      stunum: 0,
      classname: "",
    };
    $(".section_2_excellent_" + s_index + " .linescore_num").text("前" + r_data_item.linescore + "名");
    $(".section_2_excellent_" + s_index + " .floatscore_num").text("后" + r_data_item.floatscore + "名");
    $.each(r_data_item.ranks, function (index, r_item) {
      if (r_item.classid !== 0 && goodClassInfo.stunum < r_item.stujson[0].stunum) {
        goodClassInfo.stunum = r_item.stujson[0].stunum;
        goodClassInfo.classname = r_item.classname;
      }
      if (r_item.classid !== 0 && badClassInfo.stunum < r_item.stujson[0].stunum) {
        badClassInfo.stunum = r_item.stujson[0].stunum;
        badClassInfo.classname = r_item.classname;
      }
      excellent_rank_tbody_html +=
        '<tr><td><div class="my_cell">' +
        r_item.classname +
        '</div></td><td><div class="my_cell">' +
        r_item.stujson[0].stunum +
        '</div></td><td><div class="my_cell">' +
        r_item.stujson[0].sturate +
        '%</div></td><td><div class="my_cell">' +
        r_item.stujson[1].stunum +
        '</div></td><td><div class="my_cell">' +
        r_item.stujson[1].sturate +
        '%</div></td></tr>';
    });
    $(".section_2_excellent_" + s_index + " .excellent_rank_tbody").html(
      excellent_rank_tbody_html
    );
    $(".section_2_excellent_" + s_index + " .excellent_rank_good").html(
      goodClassInfo.classname
    );
    $(".section_2_excellent_" + s_index + " .excellent_rank_bad").html(
      badClassInfo.classname
    );
  });
});