Merge remote-tracking branch 'origin/gzb' into wzl

css/section_1.css

@@ -12,9 +12,6 @@
   padding-top: 4mm;
   box-sizing: border-box;
 }
-.section_item:nth-last-child(1){
-  margin-right: 0;
-}
 .section1 .item_num{
   height: 5mm;
   font-size: 3mm;

js/section_1.js

@@ -1,5 +1,442 @@
-$(function() {
+function initaveragescoreEcharts() {
+  var itemStyle = {
+    normal: {
+      label: {
+        show: true, //开启显示数值
+        position: "top" //数值在上方显示
+      }
+    }
+  };
+  var xAxis_data = ["一般", "二班"]
+  var curlegend = ["满分", "最高分", "最低分", "平均分"];
+  var curseries = [{
+      name: "满分",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [60, 70],
+      itemStyle
+    },
+    {
+      name: "最高分",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [50, 60],
+      itemStyle
+    },
+    {
+      name: "最低分",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [30, 40],
+      itemStyle
+    },
+    {
+      name: "平均分",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [40, 50],
+      itemStyle
+    }
+  ];
+  let option = {
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+    title: {
+      text: "分",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: 12,
+        fontWeight: 500
+      }
+    },
+    legend: {
+      itemWidth: 6,
+      itemHeight: 6,
+      top: "bottom",
+      data: curlegend
+    },
+    grid: {
+      top: 30,
+      left: 5,
+      right: 0,
+      bottom: "10%",
+      containLabel: true
+    },
+    xAxis: [{
+      type: "category",
+      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: curseries
+  };
+  var myEcharts = echarts.init(document.querySelector(".section1 #averagescoreEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
+}
+
+function initexcellencerateEcharts() {
+  var itemStyle = {
+    normal: {
+      label: {
+        show: true, //开启显示数值
+        position: "top" //数值在上方显示
+      }
+    }
+  };
+  var xAxis_data = ["一般", "二班"]
+  var curlegend = ["优秀率", "良好率", "及格率", "低分率"];
+  var curseries = [{
+      name: "优秀率",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [60, 70],
+      itemStyle
+    },
+    {
+      name: "良好率",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [50, 60],
+      itemStyle
+    },
+    {
+      name: "及格率",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [30, 40],
+      itemStyle
+    },
+    {
+      name: "低分率",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [40, 50],
+      itemStyle
+    }
+  ];
+  let option = {
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+    title: {
+      text: "分",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: 12,
+        fontWeight: 500
+      }
+    },
+    legend: {
+      itemWidth: 6,
+      itemHeight: 6,
+      top: "bottom",
+      data: curlegend
+    },
+    grid: {
+      top: 30,
+      left: 5,
+      right: 0,
+      bottom: "10%",
+      containLabel: true
+    },
+    xAxis: [{
+      type: "category",
+      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: curseries
+  };
+  var myEcharts = echarts.init(document.querySelector(".section1 #excellencerateEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
+}
+
+function initexamnumEcharts() {
+  var itemStyle = {
+    normal: {
+      label: {
+        show: true, //开启显示数值
+        position: "top" //数值在上方显示
+      }
+    }
+  };
+  var xAxis_data = ["一般", "二班"]
+  var curlegend = ["实考人数", "缺考人数"];
+  var curseries = [{
+      name: "实考人数",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [60, 70],
+      itemStyle
+    },
+    {
+      name: "缺考人数",
+      type: "bar",
+      barWidth: 32,
+      barMinHeight: 16,
+      barGap: 0,
+      data: [50, 60],
+      itemStyle
+    }
+  ];
+  let option = {
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+    title: {
+      text: "分",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: 12,
+        fontWeight: 500
+      }
+    },
+    legend: {
+      itemWidth: 6,
+      itemHeight: 6,
+      top: "bottom",
+      data: curlegend
+    },
+    grid: {
+      top: 30,
+      left: 5,
+      right: 0,
+      bottom: "10%",
+      containLabel: true
+    },
+    xAxis: [{
+      type: "category",
+      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: curseries
+  };
+  var myEcharts = echarts.init(document.querySelector(".section1 #examnumEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
+}
+
+function initbzcEcharts() {
+  var itemStyle = {
+    normal: {
+      label: {
+        show: true, //开启显示数值
+        position: "top" //数值在上方显示
+      }
+    }
+  };
+  var xAxis_data = ["一般", "二班"]
+  var curlegend = ["标准差"];
+  var curseries = [{
+    name: "标准差",
+    type: "bar",
+    barWidth: 32,
+    barMinHeight: 16,
+    barGap: 0,
+    data: [60, 70],
+    itemStyle
+  }];
+  let option = {
+    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
+    title: {
+      text: "分",
+      x: "left",
+      y: "top",
+      textStyle: {
+        color: "#5F6E82",
+        fontSize: 12,
+        fontWeight: 500
+      }
+    },
+    legend: {
+      itemWidth: 6,
+      itemHeight: 6,
+      top: "bottom",
+      data: curlegend
+    },
+    grid: {
+      top: 30,
+      left: 5,
+      right: 0,
+      bottom: "10%",
+      containLabel: true
+    },
+    xAxis: [{
+      type: "category",
+      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: curseries
+  };
+  var myEcharts = echarts.init(document.querySelector(".section1 #bzcEcharts"));
+  myEcharts.clear();
+  myEcharts.setOption(option);
+}
+$(function () {
   // outerHeight(true) 高度为 height+margin+padding+border
   var parameter = $(".section_1_html_root").data("page-params");
   console.log("section_1:parameter", parameter);
+  initaveragescoreEcharts();
+  initexcellencerateEcharts();
+  initexamnumEcharts();
+  initbzcEcharts();
 });

sections/section_1.html

@@ -48,7 +48,7 @@
           <div class="item_num"><span>512</span>分</div>
           <div class="item_title">平均分</div>
         </div>
-        <div class="section_item">
+        <div class="section_item" style="margin-right: 0">
           <div class="item_num"><span>456</span>分</div>
           <div class="item_title">最低分</div>
         </div>
@@ -57,7 +57,10 @@
       <h3 class="section_title_3">
         2.1 各科满分、最高分、最低分、平均分对比分析
       </h3>
-      <div id="subjectEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div>
+      <div
+        id="averagescoreEcharts"
+        style="margin: 0 4mm 4mm; height: 80mm"
+      ></div>
       <div class="echarts_result">
         <div>上图统计结果表示：</div>
         <div class="echarts_result_content">
@@ -67,20 +70,122 @@
     </div>
     <div class="page_root section1">
       <h3 class="section_title_3">
-        2.1 各科优秀率、良好率、及格率、低分率对比分析
+        2.2 各科优秀率、良好率、及格率、低分率对比分析
       </h3>
-      <div id="subjectEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div>
+      <div
+        id="excellencerateEcharts"
+        style="margin: 0 4mm 4mm; height: 80mm"
+      ></div>
       <div class="echarts_result">
         <div>上图统计结果表示：</div>
         <div class="echarts_result_content">
-          <span style="background-color: #ff5d41"></span>优秀率最高的科目：英语
+          <span style="background-color: #5c99ff"></span>优秀率最高的科目：英语
+        </div>
+        <div
+          class="echarts_result_content"
+          style="margin-top: 0; padding-top: 0"
+        >
+          <span style="background-color: #ff5f56"></span>优秀率最高的科目：英语
         </div>
+      </div>
+      <h3 class="section_title_3">2.3 各科实考人数、缺考人数分析</h3>
+      <div id="examnumEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div>
+      <div class="echarts_result">
+        <div>上图统计结果表示：</div>
         <div class="echarts_result_content">
-          <span style="background-color: #ff5d41"></span>优秀率最高的科目：英语
+          <span style="background-color: #5c99ff"></span
+          >实考人数最多的科目：英语
+        </div>
+        <div
+          class="echarts_result_content"
+          style="margin-top: 0; padding-top: 0"
+        >
+          <span style="background-color: #ff5d41"></span
+          >缺考人数最多的科目：英语
         </div>
       </div>
     </div>
-    <div class="page_root section1"></div>
+    <div class="page_root section1">
+      <h3 class="section_title_3">2.4 各科标准差分析</h3>
+      <div id="bzcEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div>
+      <h3 class="section_title_3">2.5 成绩整体分析</h3>
+      <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/section_1.js"></script>
   </body>
 </html>