班级成绩对比-全科

js/scoreAnalysis/section_2_class_all.js

@@ -7,10 +7,10 @@ function initClassScoreEcharts() {
     "八年级三班",
     "八年级四班"
   ];
-  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 series_full_data = [100, 100, 100, 100, 100];
+  var series_max_data = [95, 80, 85, 97, 85];
+  var series_min_data = [55, 60, 40, 30, 40];
+  var series_avg_data = [70, 65, 60, 80, 60];
   var option = {
     animation: false,
     title: {
@@ -23,12 +23,12 @@ function initClassScoreEcharts() {
         fontWeight: 500,
       },
     },
-    color: ["#5C99FF"],
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#F1982B"],
     legend: {
       itemWidth: $.UnitUtil.mm2px(2),
       itemHeight: $.UnitUtil.mm2px(2),
       top: "bottom",
-      data: ["违纪人数"],
+      data: ["满分", "最高分", "最低分", "平均分"],
     },
     grid: {
       top: $.UnitUtil.mm2px(10),
@@ -84,7 +84,7 @@ function initClassScoreEcharts() {
     ],
     series: [
       {
-        name: "违纪人数",
+        name: "满分",
         type: "bar",
         barWidth: $.UnitUtil.mm2px(5),
         // 柱状图最小高度
@@ -100,8 +100,65 @@ function initClassScoreEcharts() {
             formatter: "{c}",
           },
         },
-        data: series_data,
+        data: series_full_data,
+      },
+      {
+        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_max_data,
+      },
+      {
+        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_min_data,
       },
+      {
+        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_avg_data,
+      }
     ],
   };
   var myEcharts = echarts.init(document.querySelector(".section_2_class_all #classScoreEcharts"));
@@ -110,18 +167,397 @@ function initClassScoreEcharts() {
 }
 // 各班优秀率、良好率、及格率、低分率对比分析
 function initClassRateEcharts() {
-  
+  var xAxis_data = [
+    "全年级",
+    "八年级一班",
+    "八年级二班",
+    "八年级三班",
+    "八年级四班"
+  ];
+  var series_xy_data = [80.45, 77.06, 89, 78.6, 80.6];
+  var series_lh_data = [45.45, 47.06, 50, 48.6, 60.6];
+  var series_jg_data = [80.45, 77.06, 89, 78.6, 80.6];
+  var series_df_data = [80.45, 77.06, 89, 78.6, 80.6];
+  var option = {
+    animation: false,
+    title: {
+      text: "%",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: $.UnitUtil.mm2px(3),
+        fontWeight: 500,
+      },
+    },
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#F1982B"],
+    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_xy_data,
+      },
+      {
+        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_lh_data,
+      },
+      {
+        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_jg_data,
+      },
+      {
+        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_df_data,
+      }
+    ],
+  };
+  var myEcharts = echarts.init(document.querySelector(".section_2_class_all #classRateEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
 }
 // 各班实考人数、缺考人数对比
 function initClassExamEcharts() {
-  
+  var xAxis_data = [
+    "全年级",
+    "八年级一班",
+    "八年级二班",
+    "八年级三班",
+    "八年级四班"
+  ];
+  var series_sk_data = [100, 100, 100, 100, 100];
+  var series_qk_data = [95, 80, 85, 97, 85];
+  var option = {
+    animation: false,
+    title: {
+      text: "人",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: $.UnitUtil.mm2px(3),
+        fontWeight: 500,
+      },
+    },
+    color: ["#5C99FF", "#FF5F56"],
+    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_sk_data,
+      },
+      {
+        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_qk_data,
+      }
+    ],
+  };
+  var myEcharts = echarts.init(document.querySelector(".section_2_class_all #classExamEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
 }
 // 各班标准差对比分析
 function initClassStdEcharts() {
-  
+  var xAxis_data = [
+    "全年级",
+    "八年级一班",
+    "八年级二班",
+    "八年级三班",
+    "八年级四班"
+  ];
+  var series_data = [12, 10, 3, 14, 7];
+  var option = {
+    animation: false,
+    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 #classStdEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
 }
 $(function () {
-  // initClassScoreEcharts();
+  initClassScoreEcharts();
   initClassRateEcharts();
   initClassExamEcharts();
   initClassStdEcharts();

js/section_2.js

@@ -4,8 +4,8 @@ $(function() {
   console.log("section_2:parameter", parameter);
 
   var sectionsHtmlArr = [
-    // "section_2_class_all",
-    // "section_2_class_single",
+    "section_2_class_all",
+    "section_2_class_single",
     "section_2_level",
     "section_2_part",
     "section_2_lin_rank",

sections/scoreAnalysis/section_2_class_all.html

@@ -56,6 +56,82 @@
     <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>
+    <table border="1" class="my_table">
+      <thead>
+        <tr>
+          <th>班级</th>
+          <th>实考人数</th>
+          <th>缺考人数</th>
+          <th>满分</th>
+          <th>最高分</th>
+          <th>最低分</th>
+          <th>平均分</th>
+          <th>优秀率</th>
+          <th>良好率</th>
+          <th>及格率</th>
+          <th>低分率</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>
+          <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>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</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>
+          <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>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</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>
+          <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>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</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>
+          <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>
+          <td><div class="my_cell">5</div></td>
+          <td><div class="my_cell">4%</div></td>
+          <td><div class="my_cell">4%</div></td>
+        </tr>
+      </tbody>
+    </table>
   </div>
   <script src="../../js/scoreAnalysis/section_2_class_all.js"></script>
 </body>