班级成绩对比-全科

css/common.css

@@ -128,4 +128,16 @@ h1,h2,h3,h4 {
   word-break: break-all;
   white-space: pre-wrap;
   box-sizing: border-box;
+}
+.bg_5699FF {
+  background-color: #5699FF;
+}
+.bg_FF5F56 {
+  background-color: #FF5F56;
+}
+.bg_5EC5C8 {
+  background-color: #5EC5C8;
+}
+.bg_F1982B {
+  background-color: #F1982B;
 }

css/scoreAnalysis/section_2_class_all.css

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

css/section_3.css

@@ -8,6 +8,5 @@
   margin-right: 2mm;
   width: 2mm;
   height: 2mm;
-  background-color: #5699FF;
   border-radius: 50%;
 }

css/section_4.css

@@ -8,6 +8,5 @@
   margin-right: 2mm;
   width: 2mm;
   height: 2mm;
-  background-color: #5699FF;
   border-radius: 50%;
 }

js/index.js

@@ -2,7 +2,7 @@ $(function () {
   var loadHtmlArr = [
     // "cover",
     // "preface",
-    "section_1",
+    // "section_1",
     "section_2",
     // "section_3",
     // "section_4",

js/scoreAnalysis/section_2_class_all.js

@@ -0,0 +1,128 @@
+// 各班满分、最高分、最低分、平均分对比分析
+function initClassScoreEcharts() {
+  var xAxis_data = [
+    "全年级",
+    "八年级一班",
+    "八年级二班",
+    "八年级三班",
+    "八年级四班"
+  ];
+  var series_full_data = [12, 20, 15, 8, 7];
+  var series_max_data = [12, 20, 15, 8, 7];
+  var series_min_data = [12, 20, 15, 8, 7];
+  var series_avg_data = [12, 20, 15, 8, 7];
+  var option = {
+    animation: false,
+    title: {
+      text: "分",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: $.UnitUtil.mm2px(3),
+        fontWeight: 500,
+      },
+    },
+    color: ["#5C99FF"],
+    legend: {
+      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",
+        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: [
+      {
+        name: "违纪人数",
+        type: "bar",
+        barWidth: $.UnitUtil.mm2px(5),
+        // 柱状图最小高度
+        barMinHeight: $.UnitUtil.mm2px(2),
+        barGap: 0,
+        label: {
+          normal: {
+            show: true,
+            align: "center",
+            verticalAlign: "bottom",
+            position: "top",
+            distance: 0,
+            formatter: "{c}",
+          },
+        },
+        data: series_data,
+      },
+    ],
+  };
+  var myEcharts = echarts.init(document.querySelector(".section_2_class_all #classScoreEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
+}
+// 各班优秀率、良好率、及格率、低分率对比分析
+function initClassRateEcharts() {
+  
+}
+// 各班实考人数、缺考人数对比
+function initClassExamEcharts() {
+  
+}
+// 各班标准差对比分析
+function initClassStdEcharts() {
+  
+}
+$(function () {
+  initClassScoreEcharts();
+  initClassRateEcharts();
+  initClassExamEcharts();
+  initClassStdEcharts();
+});

sections/scoreAnalysis/section_2_class_all.html

@@ -5,9 +5,10 @@
   <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_class_all.css">
 </head>
 <body>
-  <div class="page_root">
+  <div class="page_root section_2_class_all">
     <h1 class="section_title_1">第二章 成绩分析</h1>
     <div class="abstract_box">
       <div class="abstract_left">
@@ -19,7 +20,42 @@
     </div>
     <h2 class="section_title_2">1.班级成绩对比</h2>
     <h3 class="section_title_3">1.1 全科对比</h3>
-    <h4 class="section_title_4">1.1.1 各科满分、最高分、最低分、平均分对比分析</h4>
+    <h4 class="section_title_4">1.1.1 各班满分、最高分、最低分、平均分对比分析</h4>
+    <div id="classScoreEcharts" style="margin: 0 4mm 4mm;height: 68mm;"></div>
+    <div class="echarts_result">
+      <div>上图统计结果表示：</div>
+      <div class="echarts_result_content">
+        <div><span class="bg_5699FF"></span>高于年级平均分的班级：八年级一班</div>
+        <div><span class="bg_FF5F56"></span>低于年级平均分的班级：八年级二班、八年级三班、八年级四班</div>
+      </div>
+    </div>
+  </div>
+  <div class="page_root section_2_class_all">
+    <h4 class="section_title_4">1.1.2 各班优秀率、良好率、及格率、低分率对比分析</h4>
+    <div id="classRateEcharts" style="margin: 0 4mm 4mm;height: 78mm;"></div>
+    <div class="echarts_result">
+      <div>上图统计结果表示：</div>
+      <div class="echarts_result_content">
+        <div><span class="bg_5699FF"></span>优秀率最高的班级：八年级二班</div>
+        <div><span class="bg_FF5F56"></span>良好率最高的班级：八年级三班</div>
+        <div><span class="bg_5EC5C8"></span>及格率最高的班级：八年级四班</div>
+        <div><span class="bg_F1982B"></span>低分率最高的班级：八年级一班</div>
+      </div>
+    </div>
+    <h4 class="section_title_4">1.1.3 各班实考人数、缺考人数对比</h4>
+    <div id="classExamEcharts" style="margin: 0 4mm 4mm;height: 78mm;"></div>
+    <div class="echarts_result">
+      <div>上图统计结果表示：</div>
+      <div class="echarts_result_content">
+        <div><span class="bg_5699FF"></span>实考人数最多的班级：八年级一班、八年级二班、八年级三班</div>
+        <div><span class="bg_FF5F56"></span>缺考人数最多的班级：八年级四班</div>
+      </div>
+    </div>
+  </div>
+  <div class="page_root section_2_class_all">
+    <h4 class="section_title_4">1.1.4 各班标准差对比分析</h4>
+    <div id="classStdEcharts" style="margin: 0 4mm 4mm;height: 63mm;"></div>
+    <h4 class="section_title_4">1.1.5 班级全科整体分析</h4>
   </div>
   <script src="../../js/scoreAnalysis/section_2_class_all.js"></script>
 </body>

sections/section_3.html

@@ -22,7 +22,7 @@
     <div id="subjectBadEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span></span>违纪行为最多的科目：英语</div>
+      <div class="echarts_result_content"><span class="bg_5699FF"></span>违纪行为最多的科目：英语</div>
     </div>
     <h2 class="section_title_2">2. 班级违纪行为统计</h2>
     <table border="1" class="my_table">
@@ -105,7 +105,7 @@
     </table>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span></span>违纪行为最多的班级：八年级三班</div>
+      <div class="echarts_result_content"><span class="bg_5699FF"></span>违纪行为最多的班级：八年级三班</div>
     </div>
   </div>
   <script src="../js/section_3.js"></script>

sections/section_4.html

@@ -22,7 +22,7 @@
     <div id="subjectGoodEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span></span>优秀试卷最多的科目：英语</div>
+      <div class="echarts_result_content"><span class="bg_5699FF"></span>优秀试卷最多的科目：英语</div>
     </div>
     <h2 class="section_title_2">2. 班级优秀试卷统计</h2>
     <table border="1" class="my_table">
@@ -105,7 +105,7 @@
     </table>
     <div class="echarts_result">
       <div>上图统计结果表示：</div>
-      <div class="echarts_result_content"><span></span>优秀试卷最多的班级：八年级三班</div>
+      <div class="echarts_result_content"><span class="bg_5699FF"></span>优秀试卷最多的班级：八年级三班</div>
     </div>
   </div>
   <script src="../js/section_4.js"></script>