Ver código fonte

第三章 违纪行为分析;第四章 优秀试卷分析

wzl_h
wangzhonglu 2 anos atrás
pai
commit
e20cde191e

+ 42
- 0
css/common.css Ver arquivo

@@ -86,4 +86,46 @@ h1,h2,h3,h4 {
86 86
 .abstract_content {
87 87
   font-size: 4mm;
88 88
   line-height: 10mm;
89
+}
90
+.echarts_result {
91
+  margin-bottom: 4mm;
92
+  padding: 3mm;
93
+  background-color: #F5F7F9;
94
+}
95
+.my_table {
96
+  margin-bottom: 4mm;
97
+  width: 100%;
98
+  empty-cells: show;
99
+  border-collapse: collapse;
100
+  table-layout: fixed;
101
+  border: 0.2mm solid #dcdee2;
102
+  border-spacing: 0;
103
+  box-sizing: border-box;
104
+  color: #333;
105
+}
106
+.my_table th {
107
+  padding: 0 0.5mm;
108
+  line-height: 8mm;
109
+  font-weight: bold;
110
+  text-align: center;
111
+  vertical-align: middle;
112
+  white-space: nowrap;
113
+  background-color: #ebf5ff;
114
+  border: 0.2mm solid #dcdee2;
115
+}
116
+.my_table td {
117
+  position: relative;
118
+  padding: 0.5mm;
119
+  line-height: 6mm;
120
+  text-align: center;
121
+  vertical-align: middle;
122
+  white-space: nowrap;
123
+  border: 0.2mm solid #dcdee2;
124
+}
125
+.my_table .my_cell {
126
+  width: 100%;
127
+  text-align: center;
128
+  word-break: break-all;
129
+  white-space: pre-wrap;
130
+  box-sizing: border-box;
89 131
 }

+ 1
- 1
css/preface.css Ver arquivo

@@ -28,5 +28,5 @@
28 28
 .preface_content_line {
29 29
   font-size: 4mm;
30 30
   line-height: 8mm;
31
-  border-bottom: 0.5mm dashed #333;
31
+  border-bottom: 0.3mm dashed #333;
32 32
 }

+ 13
- 0
css/section_3.css Ver arquivo

@@ -0,0 +1,13 @@
1
+.echarts_result_content {
2
+  margin-top: 3mm;
3
+  padding: 3mm;
4
+  background-color: #fff;
5
+}
6
+.echarts_result_content span {
7
+  display: inline-block;
8
+  margin-right: 2mm;
9
+  width: 2mm;
10
+  height: 2mm;
11
+  background-color: #5699FF;
12
+  border-radius: 50%;
13
+}

+ 13
- 0
css/section_4.css Ver arquivo

@@ -0,0 +1,13 @@
1
+.echarts_result_content {
2
+  margin-top: 3mm;
3
+  padding: 3mm;
4
+  background-color: #fff;
5
+}
6
+.echarts_result_content span {
7
+  display: inline-block;
8
+  margin-right: 2mm;
9
+  width: 2mm;
10
+  height: 2mm;
11
+  background-color: #5699FF;
12
+  border-radius: 50%;
13
+}

+ 3
- 1
index.html Ver arquivo

@@ -9,7 +9,9 @@
9 9
 </head>
10 10
 <body class="root_body">
11 11
   <div class="pdf_root"></div>
12
-  <script src="./jquery@3.6.1/jquery.js"></script>
12
+  <script src="./librarys/jquery@3.6.1/jquery.js"></script>
13
+  <script src="./librarys/echarts@4.8.0/echarts.min.js"></script>
14
+  <script src="./librarys/utils/index.js"></script>
13 15
   <script src="./js/index.js"></script>
14 16
 </body>
15 17
 </html>

+ 113
- 1
js/section_3.js Ver arquivo

@@ -1,5 +1,117 @@
1
-$(function() {
1
+function initSubjectBadEcharts() {
2
+  let xAxis_data = [
3
+    "语文",
4
+    "数学",
5
+    "英语",
6
+    "物理",
7
+    "地理",
8
+    "化学",
9
+    "道德与法治",
10
+    "历史",
11
+    "生物"
12
+  ];
13
+  let series_data = [12, 20, 15, 8, 7, 11, 13,  15, 8];
14
+  let option = {
15
+    animation: false,
16
+    title: {
17
+      text: "人",
18
+      x: "left",
19
+      y: "top",
20
+      textStyle: {
21
+        color: "#5F6E82",
22
+        fontSize: $.UnitUtil.mm2px(3),
23
+        fontWeight: 500,
24
+      },
25
+    },
26
+    color: ["#5C99FF"],
27
+    legend: {
28
+      itemWidth: $.UnitUtil.mm2px(2),
29
+      itemHeight: $.UnitUtil.mm2px(2),
30
+      top: "bottom",
31
+      data: ["违纪人数"],
32
+    },
33
+    grid: {
34
+      top: $.UnitUtil.mm2px(10),
35
+      left: 0,
36
+      right: 0,
37
+      bottom: $.UnitUtil.mm2px(8),
38
+      containLabel: true,
39
+    },
40
+    xAxis: [
41
+      {
42
+        type: "category",
43
+        data: xAxis_data,
44
+        axisLabel: {
45
+          color: "#5F6E82", //更改坐标轴文字颜色
46
+          interval: 0
47
+        },
48
+        axisTick: {
49
+          alignWithLabel: true,
50
+        },
51
+        boundaryGap: true,
52
+        triggerEvent: true,
53
+        axisLine: {
54
+          show: true, //是否显示轴线
55
+          lineStyle: {
56
+            color: "#DADADA", //刻度线的颜色
57
+          },
58
+        },
59
+      },
60
+    ],
61
+    yAxis: [
62
+      {
63
+        type: "value",
64
+        axisTick: {
65
+          show: false, //刻度
66
+        },
67
+        axisLine: {
68
+          show: false, //是否显示轴线
69
+          lineStyle: {
70
+            color: "#DADADA", //刻度线的颜色
71
+          },
72
+        },
73
+        splitLine: {
74
+          //网格线
75
+          lineStyle: {
76
+            type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
77
+          },
78
+          show: true, //隐藏或显示
79
+        },
80
+        axisLabel: {
81
+          color: "#5F6E82", //更改坐标轴文字颜色
82
+        },
83
+      },
84
+    ],
85
+    series: [
86
+      {
87
+        name: "违纪人数",
88
+        type: "bar",
89
+        barWidth: $.UnitUtil.mm2px(5),
90
+        // 柱状图最小高度
91
+        barMinHeight: $.UnitUtil.mm2px(2),
92
+        barGap: 0,
93
+        label: {
94
+          normal: {
95
+            show: true,
96
+            align: "center",
97
+            verticalAlign: "bottom",
98
+            position: "top",
99
+            distance: 0,
100
+            formatter: `{c}`,
101
+          },
102
+        },
103
+        data: series_data,
104
+      },
105
+    ],
106
+  };
107
+  let myEcharts = echarts.init(document.querySelector("#subjectBadEcharts"));
108
+  myEcharts.clear();
109
+  myEcharts.setOption(option);
110
+}
111
+$(function () {
2 112
   // outerHeight(true) 高度为 height+margin+padding+border
3 113
   let parameter = $(".section_3_html_root").data("page-params");
4 114
   console.log("section_3:parameter", parameter);
115
+
116
+  initSubjectBadEcharts();
5 117
 });

+ 112
- 0
js/section_4.js Ver arquivo

@@ -1,5 +1,117 @@
1
+function initSubjectGoodEcharts() {
2
+  let xAxis_data = [
3
+    "语文",
4
+    "数学",
5
+    "英语",
6
+    "物理",
7
+    "地理",
8
+    "化学",
9
+    "道德与法治",
10
+    "历史",
11
+    "生物"
12
+  ];
13
+  let series_data = [12, 20, 15, 8, 7, 11, 13,  15, 8];
14
+  let option = {
15
+    animation: false,
16
+    title: {
17
+      text: "人",
18
+      x: "left",
19
+      y: "top",
20
+      textStyle: {
21
+        color: "#5F6E82",
22
+        fontSize: $.UnitUtil.mm2px(3),
23
+        fontWeight: 500,
24
+      },
25
+    },
26
+    color: ["#5C99FF"],
27
+    legend: {
28
+      itemWidth: $.UnitUtil.mm2px(2),
29
+      itemHeight: $.UnitUtil.mm2px(2),
30
+      top: "bottom",
31
+      data: ["违纪人数"],
32
+    },
33
+    grid: {
34
+      top: $.UnitUtil.mm2px(10),
35
+      left: 0,
36
+      right: 0,
37
+      bottom: $.UnitUtil.mm2px(8),
38
+      containLabel: true,
39
+    },
40
+    xAxis: [
41
+      {
42
+        type: "category",
43
+        data: xAxis_data,
44
+        axisLabel: {
45
+          color: "#5F6E82", //更改坐标轴文字颜色
46
+          interval: 0
47
+        },
48
+        axisTick: {
49
+          alignWithLabel: true,
50
+        },
51
+        boundaryGap: true,
52
+        triggerEvent: true,
53
+        axisLine: {
54
+          show: true, //是否显示轴线
55
+          lineStyle: {
56
+            color: "#DADADA", //刻度线的颜色
57
+          },
58
+        },
59
+      },
60
+    ],
61
+    yAxis: [
62
+      {
63
+        type: "value",
64
+        axisTick: {
65
+          show: false, //刻度
66
+        },
67
+        axisLine: {
68
+          show: false, //是否显示轴线
69
+          lineStyle: {
70
+            color: "#DADADA", //刻度线的颜色
71
+          },
72
+        },
73
+        splitLine: {
74
+          //网格线
75
+          lineStyle: {
76
+            type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
77
+          },
78
+          show: true, //隐藏或显示
79
+        },
80
+        axisLabel: {
81
+          color: "#5F6E82", //更改坐标轴文字颜色
82
+        },
83
+      },
84
+    ],
85
+    series: [
86
+      {
87
+        name: "违纪人数",
88
+        type: "bar",
89
+        barWidth: $.UnitUtil.mm2px(5),
90
+        // 柱状图最小高度
91
+        barMinHeight: $.UnitUtil.mm2px(2),
92
+        barGap: 0,
93
+        label: {
94
+          normal: {
95
+            show: true,
96
+            align: "center",
97
+            verticalAlign: "bottom",
98
+            position: "top",
99
+            distance: 0,
100
+            formatter: `{c}`,
101
+          },
102
+        },
103
+        data: series_data,
104
+      },
105
+    ],
106
+  };
107
+  let myEcharts = echarts.init(document.querySelector("#subjectGoodEcharts"));
108
+  myEcharts.clear();
109
+  myEcharts.setOption(option);
110
+}
1 111
 $(function() {
2 112
   // outerHeight(true) 高度为 height+margin+padding+border
3 113
   let parameter = $(".section_4_html_root").data("page-params");
4 114
   console.log("section_4:parameter", parameter);
115
+
116
+  initSubjectGoodEcharts();
5 117
 });

+ 22
- 0
librarys/echarts@4.8.0/echarts.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


jquery@3.6.1/jquery.js → librarys/jquery@3.6.1/jquery.js Ver arquivo


jquery@3.6.1/jquery.min.js → librarys/jquery@3.6.1/jquery.min.js Ver arquivo


+ 20
- 0
librarys/utils/index.js Ver arquivo

@@ -0,0 +1,20 @@
1
+jQuery.extend({
2
+  UnitUtil: (function() {
3
+    let pxWidth = 0;
4
+    let tmpNode = document.createElement("DIV");
5
+    tmpNode.style.cssText =
6
+      "width:1mm;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
7
+    document.body.appendChild(tmpNode);
8
+    pxWidth = tmpNode.getBoundingClientRect().width;
9
+    tmpNode.parentNode.removeChild(tmpNode);
10
+    
11
+    return {
12
+      mm2px: function (mm) {
13
+        return parseFloat((mm * pxWidth).toFixed(0));
14
+      },
15
+      px2mm: function (px) {
16
+        return parseFloat((px / pxWidth).toFixed(0));
17
+      }
18
+    };
19
+  })()
20
+});

+ 90
- 4
sections/section_3.html Ver arquivo

@@ -5,6 +5,7 @@
5 5
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 7
   <title>校本PDF报告-第三章 违纪行为分析</title>
8
+  <link rel="stylesheet" href="../css/section_3.css">
8 9
 </head>
9 10
 <body>
10 11
   <div class="page_root">
@@ -17,10 +18,95 @@
17 18
         <div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的违纪情况,系统按照科目和班级进行分析统计,包括<strong>人数、比例。</strong></div>
18 19
       </div>
19 20
     </div>
20
-    <h2 class="section_title_2">1.总览</h2>
21
-    <h2 class="section_title_2">2.成绩概况</h2>
22
-    <h3 class="section_title_3">2.1 各科满分、最高分、最低分、平均分对比分析</h3>
23
-    <h4 class="section_title_4">2.1.1 各科满分、最高分、最低分、平均分对比分析</h4>
21
+    <h2 class="section_title_2">1. 科目违纪行为统计</h2>
22
+    <div id="subjectBadEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
23
+    <div class="echarts_result">
24
+      <div>上图统计结果表示:</div>
25
+      <div class="echarts_result_content"><span></span>违纪行为最多的科目:英语</div>
26
+    </div>
27
+    <h2 class="section_title_2">2. 班级违纪行为统计</h2>
28
+    <table border="1" class="my_table">
29
+      <thead>
30
+        <tr>
31
+          <th rowspan="2">班级</th>
32
+          <th colspan="2">语文</th>
33
+          <th colspan="2">数学</th>
34
+          <th colspan="2">英语</th>
35
+          <th colspan="2">物理</th>
36
+          <th colspan="2">地理</th>
37
+        </tr>
38
+        <tr>
39
+          <th>人数</th>
40
+          <th>比例</th>
41
+          <th>人数</th>
42
+          <th>比例</th>
43
+          <th>人数</th>
44
+          <th>比例</th>
45
+          <th>人数</th>
46
+          <th>比例</th>
47
+          <th>人数</th>
48
+          <th>比例</th>
49
+        </tr>
50
+      </thead>
51
+      <tbody>
52
+        <tr>
53
+          <td><div class="my_cell">全部班级</div></td>
54
+          <td><div class="my_cell">5</div></td>
55
+          <td><div class="my_cell">4%</div></td>
56
+          <td><div class="my_cell">5</div></td>
57
+          <td><div class="my_cell">4%</div></td>
58
+          <td><div class="my_cell">5</div></td>
59
+          <td><div class="my_cell">4%</div></td>
60
+          <td><div class="my_cell">5</div></td>
61
+          <td><div class="my_cell">4%</div></td>
62
+          <td><div class="my_cell">5</div></td>
63
+          <td><div class="my_cell">4%</div></td>
64
+        </tr>
65
+        <tr>
66
+          <td><div class="my_cell">八年级一班</div></td>
67
+          <td><div class="my_cell">5</div></td>
68
+          <td><div class="my_cell">4%</div></td>
69
+          <td><div class="my_cell">5</div></td>
70
+          <td><div class="my_cell">4%</div></td>
71
+          <td><div class="my_cell">5</div></td>
72
+          <td><div class="my_cell">4%</div></td>
73
+          <td><div class="my_cell">5</div></td>
74
+          <td><div class="my_cell">4%</div></td>
75
+          <td><div class="my_cell">5</div></td>
76
+          <td><div class="my_cell">4%</div></td>
77
+        </tr>
78
+        <tr>
79
+          <td><div class="my_cell">八年级二班</div></td>
80
+          <td><div class="my_cell">5</div></td>
81
+          <td><div class="my_cell">4%</div></td>
82
+          <td><div class="my_cell">5</div></td>
83
+          <td><div class="my_cell">4%</div></td>
84
+          <td><div class="my_cell">5</div></td>
85
+          <td><div class="my_cell">4%</div></td>
86
+          <td><div class="my_cell">5</div></td>
87
+          <td><div class="my_cell">4%</div></td>
88
+          <td><div class="my_cell">5</div></td>
89
+          <td><div class="my_cell">4%</div></td>
90
+        </tr>
91
+        <tr>
92
+          <td><div class="my_cell">八年级三班</div></td>
93
+          <td><div class="my_cell">5</div></td>
94
+          <td><div class="my_cell">4%</div></td>
95
+          <td><div class="my_cell">5</div></td>
96
+          <td><div class="my_cell">4%</div></td>
97
+          <td><div class="my_cell">5</div></td>
98
+          <td><div class="my_cell">4%</div></td>
99
+          <td><div class="my_cell">5</div></td>
100
+          <td><div class="my_cell">4%</div></td>
101
+          <td><div class="my_cell">5</div></td>
102
+          <td><div class="my_cell">4%</div></td>
103
+        </tr>
104
+      </tbody>
105
+    </table>
106
+    <div class="echarts_result">
107
+      <div>上图统计结果表示:</div>
108
+      <div class="echarts_result_content"><span></span>违纪行为最多的班级:八年级三班</div>
109
+    </div>
24 110
   </div>
25 111
   <script src="../js/section_3.js"></script>
26 112
 </body>

+ 90
- 4
sections/section_4.html Ver arquivo

@@ -5,6 +5,7 @@
5 5
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 7
   <title>校本PDF报告-第四章 优秀试卷分析</title>
8
+  <link rel="stylesheet" href="../css/section_4.css">
8 9
 </head>
9 10
 <body>
10 11
   <div class="page_root">
@@ -17,10 +18,95 @@
17 18
         <div class="abstract_content">从学校和数据的角度分析整体科目、整体班级及各科各班之间的优秀试卷情况,系统按照科目和班级进行分析统计,包括<strong>人数、比例。</strong></div>
18 19
       </div>
19 20
     </div>
20
-    <h2 class="section_title_2">1.总览</h2>
21
-    <h2 class="section_title_2">2.成绩概况</h2>
22
-    <h3 class="section_title_3">2.1 各科满分、最高分、最低分、平均分对比分析</h3>
23
-    <h4 class="section_title_4">2.1.1 各科满分、最高分、最低分、平均分对比分析</h4>
21
+    <h2 class="section_title_2">1. 科目优秀试卷统计</h2>
22
+    <div id="subjectGoodEcharts" style="margin: 0 4mm 4mm;height: 71mm;"></div>
23
+    <div class="echarts_result">
24
+      <div>上图统计结果表示:</div>
25
+      <div class="echarts_result_content"><span></span>优秀试卷最多的科目:英语</div>
26
+    </div>
27
+    <h2 class="section_title_2">2. 班级优秀试卷统计</h2>
28
+    <table border="1" class="my_table">
29
+      <thead>
30
+        <tr>
31
+          <th rowspan="2">班级</th>
32
+          <th colspan="2">语文</th>
33
+          <th colspan="2">数学</th>
34
+          <th colspan="2">英语</th>
35
+          <th colspan="2">物理</th>
36
+          <th colspan="2">地理</th>
37
+        </tr>
38
+        <tr>
39
+          <th>人数</th>
40
+          <th>比例</th>
41
+          <th>人数</th>
42
+          <th>比例</th>
43
+          <th>人数</th>
44
+          <th>比例</th>
45
+          <th>人数</th>
46
+          <th>比例</th>
47
+          <th>人数</th>
48
+          <th>比例</th>
49
+        </tr>
50
+      </thead>
51
+      <tbody>
52
+        <tr>
53
+          <td><div class="my_cell">全部班级</div></td>
54
+          <td><div class="my_cell">5</div></td>
55
+          <td><div class="my_cell">4%</div></td>
56
+          <td><div class="my_cell">5</div></td>
57
+          <td><div class="my_cell">4%</div></td>
58
+          <td><div class="my_cell">5</div></td>
59
+          <td><div class="my_cell">4%</div></td>
60
+          <td><div class="my_cell">5</div></td>
61
+          <td><div class="my_cell">4%</div></td>
62
+          <td><div class="my_cell">5</div></td>
63
+          <td><div class="my_cell">4%</div></td>
64
+        </tr>
65
+        <tr>
66
+          <td><div class="my_cell">八年级一班</div></td>
67
+          <td><div class="my_cell">5</div></td>
68
+          <td><div class="my_cell">4%</div></td>
69
+          <td><div class="my_cell">5</div></td>
70
+          <td><div class="my_cell">4%</div></td>
71
+          <td><div class="my_cell">5</div></td>
72
+          <td><div class="my_cell">4%</div></td>
73
+          <td><div class="my_cell">5</div></td>
74
+          <td><div class="my_cell">4%</div></td>
75
+          <td><div class="my_cell">5</div></td>
76
+          <td><div class="my_cell">4%</div></td>
77
+        </tr>
78
+        <tr>
79
+          <td><div class="my_cell">八年级二班</div></td>
80
+          <td><div class="my_cell">5</div></td>
81
+          <td><div class="my_cell">4%</div></td>
82
+          <td><div class="my_cell">5</div></td>
83
+          <td><div class="my_cell">4%</div></td>
84
+          <td><div class="my_cell">5</div></td>
85
+          <td><div class="my_cell">4%</div></td>
86
+          <td><div class="my_cell">5</div></td>
87
+          <td><div class="my_cell">4%</div></td>
88
+          <td><div class="my_cell">5</div></td>
89
+          <td><div class="my_cell">4%</div></td>
90
+        </tr>
91
+        <tr>
92
+          <td><div class="my_cell">八年级三班</div></td>
93
+          <td><div class="my_cell">5</div></td>
94
+          <td><div class="my_cell">4%</div></td>
95
+          <td><div class="my_cell">5</div></td>
96
+          <td><div class="my_cell">4%</div></td>
97
+          <td><div class="my_cell">5</div></td>
98
+          <td><div class="my_cell">4%</div></td>
99
+          <td><div class="my_cell">5</div></td>
100
+          <td><div class="my_cell">4%</div></td>
101
+          <td><div class="my_cell">5</div></td>
102
+          <td><div class="my_cell">4%</div></td>
103
+        </tr>
104
+      </tbody>
105
+    </table>
106
+    <div class="echarts_result">
107
+      <div>上图统计结果表示:</div>
108
+      <div class="echarts_result_content"><span></span>优秀试卷最多的班级:八年级三班</div>
109
+    </div>
24 110
   </div>
25 111
   <script src="../js/section_4.js"></script>
26 112
 </body>

Carregando…
Cancelar
Salvar