分数段统计

css/section_1.css

     margin-top: 3mm;
     padding: 3mm;
     background-color: #fff;
+}
+.curscorelevel{
+  background-color: rgba(245, 247, 249, 1);
+  padding: 3mm 0 3mm 2mm;
 }

js/section_1.js

     myEcharts.setOption(option);
   }
 
-  function initexamaverageEcharts (list, xAxis_data) {
-    console.log(list)
-    console.log(xAxis_data)
+  function initexamaverageEcharts(list, xAxis_data) {
     var itemStyle = {
       normal: {
         label: {
     myEcharts.clear();
     myEcharts.setOption(option);
   }
-   //图表数据
-  function showgraphicaldata(
-    xAxis_data,
-    legend_data,
-    levelrangeObj,
-    list
-  ) {
+  //图表数据
+  function showgraphicaldata(xAxis_data, legend_data, levelrangeObj, 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 tableobj = {};
+    var tablehtml = "";
+   $.each(xAxis_data, function (idx, item) {
       var classs = $.grep(arr, function (val) {
         return val.subjectname == item;
       });
-      $.each(legend_data, function (idx, item) {
-        var rank = $.grep(classs, function (val) {
-          return val.rankname + "类" == item;
-        })[0];
-        trHtml +=
+      tableobj[classs[0].subjectname + "goodTableHeadTr1Html"] =
+        '<th rowspan="2">科目</th>';
+      tableobj[classs[0].subjectname + "goodTableHeadTr2Html"] = "";
+      tableobj[classs[0].subjectname + "goodTableTbodyHtml"] = "";
+      $.each(classs, function (idx, item) {
+        tableobj[item.subjectname + "goodTableHeadTr1Html"] +=
+          '<th colspan="2">' + item.rankname + "类" + item.rankrange + "</th>";
+        tableobj[item.subjectname + "goodTableHeadTr2Html"] +=
+          "<th>人数</th><th>比例</th>";
+        if (idx == 0) {
+          tableobj[item.subjectname + "goodTableTbodyHtml"] +=
+            '<td><div class="my_cell">' + item.subjectname + "</div></td>";
+        }
+        tableobj[item.subjectname + "goodTableTbodyHtml"] +=
           '<td><div class="my_cell">' +
-          rank.stunum +
+          item.stunum +
           '</div></td><td><div class="my_cell">' +
-          rank.sturate +
+          item.sturate +
           "%</div></td>";
       });
-      goodTableTbodyHtml += "<tr>" + trHtml + "</tr>";
+      tablehtml +=
+        '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        tableobj[classs[0].subjectname + "goodTableHeadTr1Html"] +
+        '</tr><tr class="goodTableHeadTr2">' +
+        tableobj[classs[0].subjectname + "goodTableHeadTr2Html"] +
+        '</tr></thead><tbody class="goodTableTbody">' +
+        tableobj[classs[0].subjectname + "goodTableTbodyHtml"] +
+        "</tbody></table>";
     });
-    $(".section1 .gradescale .goodTableHeadTr1").html(
-      goodTableHeadTr1Html
-    );
-    $(".section1 .gradescale .goodTableHeadTr2").html(
-      goodTableHeadTr2Html
-    );
-    $(".section1 .gradescale .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.subjectid === "zf") {
-        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);
-        }
-      }
+    $(".section1 .gradescale").html(tablehtml);
+  }
+
+  function initclassscorePartEcharts(list) {
+    var xAxis_data = [];
+    var dataArr = [];
+    var arr = $.grep(list, function (val) {
+      return val.subjectid == "zf";
     });
-    $.each(list, function (index, listItem) {
-      if (!minObj[listItem.rankname]) {
-        minObj[listItem.rankname] = {
-          stunum: maxObj[listItem.rankname].stunum,
-          classidArr: []
-        };
+    $.each(arr, function (index, item) {
+      xAxis_data.push(item.rankname);
+      dataArr.push(item.stunum);
+    });
+    var series_data = [
+      {
+        name: "全科",
+        type: "line",
+        symbol: "circle",
+        stack: "全科",
+        label: {
+          normal: {
+            show: true,
+            align: "center",
+            verticalAlign: "bottom",
+            position: "top",
+            distance: 0,
+            formatter: `{c}`
+          }
+        },
+        data: dataArr
       }
-      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);
+    ];
+    var option = {
+      animation: false,
+      title: {
+        text: "人",
+        x: "left",
+        y: "top",
+        textStyle: {
+          color: "#5F6E82",
+          fontSize: $.UnitUtil.mm2px(3),
+          fontWeight: 500
         }
-      }
-    });
-    console.log($(".section1 .result_collect"))
-    $(".section1 .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 +
-        "%）"
-    );
-    $(".section1 .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("、")
-    );
-
-    $(".section1 .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("、")
-    );
-
-    $(".section1 .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("、")
-    );
-
-    $(".section1 .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("、")
+      },
+      color: ["#5C99FF", "#ff5f56", "#5EC5C8", "#f1982b", "#6e5eff"],
+      legend: {
+        icon: "roundRect",
+        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",
+        axisLabel: {
+          textStyle: {
+            color: "#5F6E82"
+          },
+          interval: 2,
+          rotate: 0
+        },
+        axisTick: {
+          show: false
+        },
+        data: xAxis_data
+      },
+      yAxis: {
+        axisLabel: {
+          textStyle: {
+            color: "#9B9B9BFF"
+          },
+          interval: 0
+        },
+        minInterval: 1,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          //网格线
+          lineStyle: {
+            type: "dotted", //设置网格线类型 dotted：虚线   solid:实线
+            color: "#DADADA"
+          },
+          show: true //隐藏或显示
+        },
+        type: "value"
+      },
+      series: series_data
+    };
+    var myEcharts = echarts.init(
+      document.querySelector(".section1 #classscorePartEcharts")
     );
+    myEcharts.clear();
+    myEcharts.setOption(option);
+    showscoredistributiondata(list,xAxis_data,dataArr);
+  }
 
-    $(".section1 .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("、")
-    );
+  function showscoredistributiondata(list,xAxis_data) {
+    var tableobj = {};
+    var num = -1, rownum = 6;//一行六条数据
+    $.each(xAxis_data,function (idx,item) {
+      var obj = $.grep(list, function (val) {
+        return val.rankname == item && val.subjectid == "zf";
+      })[0]
+       if ((idx + rownum) % rownum == 0) {
+        num++;
+        tableobj[num + "goodTableHeadTr1Html"] = '<th rowspan="2">班级</th>';
+         tableobj[num + "goodTableHeadTr2Html"] = "";
+          tableobj[num+"trHtml"] = '<td><div class="my_cell">全科</div></td>';
+      } 
+      tableobj[num + "goodTableHeadTr1Html"] += '<th colspan="2">' + item + "</th>";
+      tableobj[num + "goodTableHeadTr2Html"] += "<th>人数</th><th>比例</th>";
+       tableobj[num+"trHtml"] +=
+          '<td><div class="my_cell">' +
+          obj.stunum +
+          '</div></td><td><div class="my_cell">' +
+          obj.sturate +
+          "%</div></td>";
+    })
+       //计算表格高度 页面高1047 剩余高度582 表头62.5  内容27.42
+    var tableheight = (27.5+62.5 +15) *(num+1);
+    var page = {
+      1:"",2:"",3:""
+    }; //页数
+    var table = "";
+    var itemheight = 27.5 + 62.5 + 15; //单表高度
+    var maxheight = 0;
+    for (var i = 0; i < num + 1; i++){
+      maxheight = itemheight * (i + 1)
+      var content = '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        tableobj[i + "goodTableHeadTr1Html"] + '</tr><tr class="goodTableHeadTr2">' +
+        tableobj[i + "goodTableHeadTr2Html"] + '</tr></thead><tbody class="goodTableTbody">' +
+        tableobj[i + "trHtml"] + '</tbody></table>';
+      //计算剩余高度是否能显示最后一个表格
+      if (maxheight > 582 && 582-maxheight<itemheight) {
+        page[1] += content;
+      } else if (maxheight > 1629 && 1629-maxheight<itemheight) {
+        page[2] += content;
+      } else {
+        table += content;
+      }
+    }
+       $(".table_num0 .scoredistribution").html(table);
+    if (tableheight > 582) {
+      //添加第一页
+      $(".table_num0").after('<div class="page_root section_2_part table_num1"></div>')
+      $(".table_num1").html(page[1]);
+    } else if (tableheight > 1629) {
+      //添加第二页
+      $(".table_num1").after('<div class="page_root section_2_part table_num2"></div>')
+      $(".table_num2").html(page[2]);
+    } 
   }
   var parameter = JSON.parse($(".section_1_html_root").data("page-params"));
   var xAxis_data = [],
       "%" +
       '</div></td><td><div class="my_cell">' +
       (item.bzc || 0) +
-      "</div></td></tr>";
+      "%</div></td></tr>";
     xAxis_data.push(item.subjectname);
   }
   goodclass.classname = goodclass.classname.substr(
     0,
     badclass.classname.length - 1
   );
-  console.log(parameter.fsdjtj);
+  console.log(parameter);
   $(".section1 .mfclass").text(mfclass.classname); //满分
   $(".section1 .yxclass").text(yxclass.classname); //优秀
   $(".section1 .lhclass").text(lhclass.classname); //良好
   initbzcEcharts(parameter.xkcj, xAxis_data);
   initexamaverageEcharts(parameter.xkcj, xAxis_data);
   initscoreGradeEcharts(parameter.fsdjtj, xAxis_data);
+  initclassscorePartEcharts(parameter.fsdtj);
+  document.documentElement.scrollTop = 4200;
 });

sections/section_1.html

     </div>
     <div class="page_root section1">
       <h3 class="section_title_3">3.2 各科等级比例分析</h3>
-      <div class="gradescale">
-        <table border="1" class="my_table">
-          <thead>
-            <tr class="goodTableHeadTr1"></tr>
-            <tr class="goodTableHeadTr2"></tr>
-          </thead>
-          <tbody class="goodTableTbody"></tbody>
-        </table>
-      </div>
-      <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 class="gradescale"></div>
+    </div>
+    <div class="page_root section1 table_num0">
+      <div>
+        <h2 class="section_title_2">4.分数段统计</h2>
+        <h3 class="section_title_3">4.1 各科分数段分析</h3>
+        <div class="curscorelevel">
+          当前设置分数段：<span class="classPartEcharts">20</span>分/段
         </div>
+        <div
+          id="classscorePartEcharts"
+          style="margin: 0 4mm 4mm; height: 80mm"
+        ></div>
+        <h3 class="section_title_3">4.2 各科分数段比例分布</h3>
+      </div>
+
+      <div class="scoredistribution"></div>
     </div>
     <script src="../js/section_1.js"></script>
   </body>