优秀生、学困生对比

css/scoreAnalysis/section_2_excellent_all.css

@@ -0,0 +1,13 @@
+.section_2_excellent_all .echarts_result_content {
+    margin-top: 3mm;
+    padding: 2mm 3mm;
+    line-height: 7mm;
+    background-color: #fff;
+}
+.section_2_excellent_all .echarts_result_content .dot {
+    display: inline-block;
+    margin-right: 2mm;
+    width: 2mm;
+    height: 2mm;
+    border-radius: 50%;
+}

js/scoreAnalysis/section_2_excellent_all.js

@@ -0,0 +1,128 @@
+$(function () {
+  // 优秀生、学困生统计
+  function initClassExcellenceEcharts() {
+    let legend_data = ["优秀生", "学困生"];
+    let xAxis_data = ["全部班级", "九年级一班", "九年级二班"];
+    let series_data1 = [10, 6, 4];
+    let series_data2 = [-11, -11, -11];
+    let 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_all #classExcellenceEcharts"));
+    myEcharts.clear();
+    myEcharts.setOption(option);
+  }
+  initClassExcellenceEcharts();
+});

js/section_2.js

@@ -10,7 +10,7 @@ $(function() {
     "section_2_part",
     "section_2_lin_all",
     "section_2_lin_single",
-    "section_2_excellent"
+    "section_2_excellent_all"
   ];
   $(".score_analysis_root").html(sectionsHtmlArr.map(function (htmlName) {
     return "<div class='" + htmlName + "_html_root'></div>";

notes.txt

@@ -10,7 +10,8 @@ section_2.html 第二部分
         分数分段对比-全科（分数分段对比-单科）section_2_part
         临界生对比-全科 （按名次）临界生对比-全科 （按分数）section_2_lin_all
         临界生对比-单科 （按名次）临界生对比-单科 （按分数）section_2_lin_single
-        优秀生、学困生对比-全科（优秀生、学困生对比-单科）section_2_excellent
+        优秀生、学困生对比-全科 section_2_excellent_all
+        优秀生、学困生对比-单科 section_2_excellent_single
 section_3.html 第三部分
 section_4.html 第四部分
 

sections/scoreAnalysis/section_2_excellent.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cn">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>校本PDF报告-第二章 成绩分析</title>
-</head>
-<body>
-  <div class="page_root"></div>
-  <script src="../../js/scoreAnalysis/section_2_excellent.js"></script>
-</body>
-</html>

sections/scoreAnalysis/section_2_excellent_all.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>校本PDF报告-第二章 成绩分析</title>
+  <link rel="stylesheet" href="../../css/scoreAnalysis/section_2_excellent_all.css">
+</head>
+<body>
+  <div class="page_root section_2_excellent_all">
+    <h2 class="section_title_2">5. 优秀生、学困生对比</h2>
+    <h3 class="section_title_3">5.1 全科优秀生、学困生对比</h3>
+    <h4 class="section_title_4">5.1.1 各班的优秀生、学困生对比</h4>
+    <div class="echarts_result">优秀生：年级前<span class="c_5699FF">10</span>名<span class="margin_left_6mm">学困生：年级后<span class="c_5699FF">10</span>名</span></div>
+    <div id="classExcellenceEcharts" style="margin: 0 4mm 4mm;height: 120mm;"></div>
+  </div>
+  <div class="page_root section_2_excellent_all">
+    <h4 class="section_title_4">5.1.2 各班优秀生、学困生占比分布</h4>
+    <table border="1" class="my_table">
+      <thead>
+        <tr>
+          <th>班级</th>
+          <th>前10名</th>
+          <th>占比</th>
+          <th>后10名</th>
+          <th>占比</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><div class="my_cell">全年级</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+        </tr>
+        <tr>
+          <td><div class="my_cell">八年级一班</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+        </tr>
+        <tr>
+          <td><div class="my_cell">八年级一班</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+        </tr>
+        <tr>
+          <td><div class="my_cell">八年级一班</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="echarts_result">
+      <div>上图统计结果表示：</div>
+      <div class="echarts_result_content">
+        <div><span class="dot bg_5699FF"></span>年级前10名优秀生最多的班级：八年级一班</div>
+        <div><span class="dot bg_FF5F56"></span>年级后10名学困生最多的班级：八年级六班</div>
+      </div>
+    </div>
+  </div>
+  <script src="../../js/scoreAnalysis/section_2_excellent_all.js"></script>
+</body>
+</html>