Browse Source

班级成绩对比-单科

wzl_h
wangzl 2 years ago
parent
commit
b9eadb7a5c

+ 3
- 0
css/common.css View File

@@ -152,4 +152,7 @@ h1,h2,h3,h4 {
152 152
 }
153 153
 .w16mm {
154 154
   width: 16mm;
155
+}
156
+.w29mm {
157
+  width: 29mm;
155 158
 }

+ 13
- 0
css/scoreAnalysis/section_2_class_single.css View File

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

+ 5
- 5
js/index.js View File

@@ -1,11 +1,11 @@
1 1
 $(function () {
2 2
   var loadHtmlArr = [
3
-    // "cover",
4
-    // "preface",
5
-    // "section_1",
3
+    "cover",
4
+    "preface",
5
+    "section_1",
6 6
     "section_2",
7
-    // "section_3",
8
-    // "section_4",
7
+    "section_3",
8
+    "section_4",
9 9
   ];
10 10
   $(".pdf_root").html(loadHtmlArr.map(function (htmlName) {
11 11
     return "<div class='" + htmlName + "_html_root'></div>";

+ 522
- 522
js/scoreAnalysis/section_2_class_all.js
File diff suppressed because it is too large
View File


+ 564
- 0
js/scoreAnalysis/section_2_class_single.js View File

@@ -0,0 +1,564 @@
1
+$(function () {
2
+  // 各班满分、最高分、最低分、平均分对比分析
3
+  function initClassScoreEcharts() {
4
+    var xAxis_data = [
5
+      "全年级",
6
+      "八年级一班",
7
+      "八年级二班",
8
+      "八年级三班",
9
+      "八年级四班"
10
+    ];
11
+    var series_full_data = [100, 100, 100, 100, 100];
12
+    var series_max_data = [95, 80, 85, 97, 85];
13
+    var series_min_data = [55, 60, 40, 30, 40];
14
+    var series_avg_data = [70, 65, 60, 80, 60];
15
+    var option = {
16
+      animation: false,
17
+      title: {
18
+        text: "分",
19
+        x: "left",
20
+        y: "top",
21
+        textStyle: {
22
+          color: "#5F6E82",
23
+          fontSize: $.UnitUtil.mm2px(3),
24
+          fontWeight: 500,
25
+        },
26
+      },
27
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#F1982B"],
28
+      legend: {
29
+        itemWidth: $.UnitUtil.mm2px(2),
30
+        itemHeight: $.UnitUtil.mm2px(2),
31
+        top: "bottom",
32
+        data: ["满分", "最高分", "最低分", "平均分"],
33
+      },
34
+      grid: {
35
+        top: $.UnitUtil.mm2px(10),
36
+        left: 0,
37
+        right: 0,
38
+        bottom: $.UnitUtil.mm2px(8),
39
+        containLabel: true,
40
+      },
41
+      xAxis: [
42
+        {
43
+          type: "category",
44
+          data: xAxis_data,
45
+          axisLabel: {
46
+            color: "#5F6E82", //更改坐标轴文字颜色
47
+            interval: 0
48
+          },
49
+          axisTick: {
50
+            alignWithLabel: true,
51
+          },
52
+          boundaryGap: true,
53
+          triggerEvent: true,
54
+          axisLine: {
55
+            show: true, //是否显示轴线
56
+            lineStyle: {
57
+              color: "#DADADA", //刻度线的颜色
58
+            },
59
+          },
60
+        },
61
+      ],
62
+      yAxis: [
63
+        {
64
+          type: "value",
65
+          axisTick: {
66
+            show: false, //刻度
67
+          },
68
+          axisLine: {
69
+            show: false, //是否显示轴线
70
+            lineStyle: {
71
+              color: "#DADADA", //刻度线的颜色
72
+            },
73
+          },
74
+          splitLine: {
75
+            //网格线
76
+            lineStyle: {
77
+              type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
78
+            },
79
+            show: true, //隐藏或显示
80
+          },
81
+          axisLabel: {
82
+            color: "#5F6E82", //更改坐标轴文字颜色
83
+          },
84
+        },
85
+      ],
86
+      series: [
87
+        {
88
+          name: "满分",
89
+          type: "bar",
90
+          barWidth: $.UnitUtil.mm2px(5),
91
+          // 柱状图最小高度
92
+          barMinHeight: $.UnitUtil.mm2px(2),
93
+          barGap: 0,
94
+          label: {
95
+            normal: {
96
+              show: true,
97
+              align: "center",
98
+              verticalAlign: "bottom",
99
+              position: "top",
100
+              distance: 0,
101
+              formatter: "{c}",
102
+            },
103
+          },
104
+          data: series_full_data,
105
+        },
106
+        {
107
+          name: "最高分",
108
+          type: "bar",
109
+          barWidth: $.UnitUtil.mm2px(5),
110
+          // 柱状图最小高度
111
+          barMinHeight: $.UnitUtil.mm2px(2),
112
+          barGap: 0,
113
+          label: {
114
+            normal: {
115
+              show: true,
116
+              align: "center",
117
+              verticalAlign: "bottom",
118
+              position: "top",
119
+              distance: 0,
120
+              formatter: "{c}",
121
+            },
122
+          },
123
+          data: series_max_data,
124
+        },
125
+        {
126
+          name: "最低分",
127
+          type: "bar",
128
+          barWidth: $.UnitUtil.mm2px(5),
129
+          // 柱状图最小高度
130
+          barMinHeight: $.UnitUtil.mm2px(2),
131
+          barGap: 0,
132
+          label: {
133
+            normal: {
134
+              show: true,
135
+              align: "center",
136
+              verticalAlign: "bottom",
137
+              position: "top",
138
+              distance: 0,
139
+              formatter: "{c}",
140
+            },
141
+          },
142
+          data: series_min_data,
143
+        },
144
+        {
145
+          name: "平均分",
146
+          type: "bar",
147
+          barWidth: $.UnitUtil.mm2px(5),
148
+          // 柱状图最小高度
149
+          barMinHeight: $.UnitUtil.mm2px(2),
150
+          barGap: 0,
151
+          label: {
152
+            normal: {
153
+              show: true,
154
+              align: "center",
155
+              verticalAlign: "bottom",
156
+              position: "top",
157
+              distance: 0,
158
+              formatter: "{c}",
159
+            },
160
+          },
161
+          data: series_avg_data,
162
+        }
163
+      ],
164
+    };
165
+    var myEcharts = echarts.init(document.querySelector(".section_2_class_single #classScoreEcharts"));
166
+    myEcharts.clear();
167
+    myEcharts.setOption(option);
168
+  }
169
+  // 各班优秀率、良好率、及格率、低分率对比分析
170
+  function initClassRateEcharts() {
171
+    var xAxis_data = [
172
+      "全年级",
173
+      "八年级一班",
174
+      "八年级二班",
175
+      "八年级三班",
176
+      "八年级四班"
177
+    ];
178
+    var series_xy_data = [80.45, 77.06, 89, 78.6, 80.6];
179
+    var series_lh_data = [45.45, 47.06, 50, 48.6, 60.6];
180
+    var series_jg_data = [80.45, 77.06, 89, 78.6, 80.6];
181
+    var series_df_data = [80.45, 77.06, 89, 78.6, 80.6];
182
+    var option = {
183
+      animation: false,
184
+      title: {
185
+        text: "%",
186
+        x: "left",
187
+        y: "top",
188
+        textStyle: {
189
+          color: "#5F6E82",
190
+          fontSize: $.UnitUtil.mm2px(3),
191
+          fontWeight: 500,
192
+        },
193
+      },
194
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#F1982B"],
195
+      legend: {
196
+        itemWidth: $.UnitUtil.mm2px(2),
197
+        itemHeight: $.UnitUtil.mm2px(2),
198
+        top: "bottom",
199
+        data: ["优秀率", "良好率", "及格率", "低分率"],
200
+      },
201
+      grid: {
202
+        top: $.UnitUtil.mm2px(10),
203
+        left: 0,
204
+        right: 0,
205
+        bottom: $.UnitUtil.mm2px(8),
206
+        containLabel: true,
207
+      },
208
+      xAxis: [
209
+        {
210
+          type: "category",
211
+          data: xAxis_data,
212
+          axisLabel: {
213
+            color: "#5F6E82", //更改坐标轴文字颜色
214
+            interval: 0
215
+          },
216
+          axisTick: {
217
+            alignWithLabel: true,
218
+          },
219
+          boundaryGap: true,
220
+          triggerEvent: true,
221
+          axisLine: {
222
+            show: true, //是否显示轴线
223
+            lineStyle: {
224
+              color: "#DADADA", //刻度线的颜色
225
+            },
226
+          },
227
+        },
228
+      ],
229
+      yAxis: [
230
+        {
231
+          type: "value",
232
+          axisTick: {
233
+            show: false, //刻度
234
+          },
235
+          axisLine: {
236
+            show: false, //是否显示轴线
237
+            lineStyle: {
238
+              color: "#DADADA", //刻度线的颜色
239
+            },
240
+          },
241
+          splitLine: {
242
+            //网格线
243
+            lineStyle: {
244
+              type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
245
+            },
246
+            show: true, //隐藏或显示
247
+          },
248
+          axisLabel: {
249
+            color: "#5F6E82", //更改坐标轴文字颜色
250
+          },
251
+        },
252
+      ],
253
+      series: [
254
+        {
255
+          name: "优秀率",
256
+          type: "bar",
257
+          barWidth: $.UnitUtil.mm2px(5),
258
+          // 柱状图最小高度
259
+          barMinHeight: $.UnitUtil.mm2px(2),
260
+          barGap: 0,
261
+          label: {
262
+            normal: {
263
+              show: true,
264
+              align: "center",
265
+              verticalAlign: "bottom",
266
+              position: "top",
267
+              distance: 0,
268
+              formatter: "{c}",
269
+            },
270
+          },
271
+          data: series_xy_data,
272
+        },
273
+        {
274
+          name: "良好率",
275
+          type: "bar",
276
+          barWidth: $.UnitUtil.mm2px(5),
277
+          // 柱状图最小高度
278
+          barMinHeight: $.UnitUtil.mm2px(2),
279
+          barGap: 0,
280
+          label: {
281
+            normal: {
282
+              show: true,
283
+              align: "center",
284
+              verticalAlign: "bottom",
285
+              position: "top",
286
+              distance: 0,
287
+              formatter: "{c}",
288
+            },
289
+          },
290
+          data: series_lh_data,
291
+        },
292
+        {
293
+          name: "及格率",
294
+          type: "bar",
295
+          barWidth: $.UnitUtil.mm2px(5),
296
+          // 柱状图最小高度
297
+          barMinHeight: $.UnitUtil.mm2px(2),
298
+          barGap: 0,
299
+          label: {
300
+            normal: {
301
+              show: true,
302
+              align: "center",
303
+              verticalAlign: "bottom",
304
+              position: "top",
305
+              distance: 0,
306
+              formatter: "{c}",
307
+            },
308
+          },
309
+          data: series_jg_data,
310
+        },
311
+        {
312
+          name: "低分率",
313
+          type: "bar",
314
+          barWidth: $.UnitUtil.mm2px(5),
315
+          // 柱状图最小高度
316
+          barMinHeight: $.UnitUtil.mm2px(2),
317
+          barGap: 0,
318
+          label: {
319
+            normal: {
320
+              show: true,
321
+              align: "center",
322
+              verticalAlign: "bottom",
323
+              position: "top",
324
+              distance: 0,
325
+              formatter: "{c}",
326
+            },
327
+          },
328
+          data: series_df_data,
329
+        }
330
+      ],
331
+    };
332
+    var myEcharts = echarts.init(document.querySelector(".section_2_class_single #classRateEcharts"));
333
+    myEcharts.clear();
334
+    myEcharts.setOption(option);
335
+  }
336
+  // 各班实考人数、缺考人数对比
337
+  function initClassExamEcharts() {
338
+    var xAxis_data = [
339
+      "全年级",
340
+      "八年级一班",
341
+      "八年级二班",
342
+      "八年级三班",
343
+      "八年级四班"
344
+    ];
345
+    var series_sk_data = [100, 100, 100, 100, 100];
346
+    var series_qk_data = [95, 80, 85, 97, 85];
347
+    var option = {
348
+      animation: false,
349
+      title: {
350
+        text: "人",
351
+        x: "left",
352
+        y: "top",
353
+        textStyle: {
354
+          color: "#5F6E82",
355
+          fontSize: $.UnitUtil.mm2px(3),
356
+          fontWeight: 500,
357
+        },
358
+      },
359
+      color: ["#5C99FF", "#FF5F56"],
360
+      legend: {
361
+        itemWidth: $.UnitUtil.mm2px(2),
362
+        itemHeight: $.UnitUtil.mm2px(2),
363
+        top: "bottom",
364
+        data: ["实考人数", "缺考人数"],
365
+      },
366
+      grid: {
367
+        top: $.UnitUtil.mm2px(10),
368
+        left: 0,
369
+        right: 0,
370
+        bottom: $.UnitUtil.mm2px(8),
371
+        containLabel: true,
372
+      },
373
+      xAxis: [
374
+        {
375
+          type: "category",
376
+          data: xAxis_data,
377
+          axisLabel: {
378
+            color: "#5F6E82", //更改坐标轴文字颜色
379
+            interval: 0
380
+          },
381
+          axisTick: {
382
+            alignWithLabel: true,
383
+          },
384
+          boundaryGap: true,
385
+          triggerEvent: true,
386
+          axisLine: {
387
+            show: true, //是否显示轴线
388
+            lineStyle: {
389
+              color: "#DADADA", //刻度线的颜色
390
+            },
391
+          },
392
+        },
393
+      ],
394
+      yAxis: [
395
+        {
396
+          type: "value",
397
+          axisTick: {
398
+            show: false, //刻度
399
+          },
400
+          axisLine: {
401
+            show: false, //是否显示轴线
402
+            lineStyle: {
403
+              color: "#DADADA", //刻度线的颜色
404
+            },
405
+          },
406
+          splitLine: {
407
+            //网格线
408
+            lineStyle: {
409
+              type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
410
+            },
411
+            show: true, //隐藏或显示
412
+          },
413
+          axisLabel: {
414
+            color: "#5F6E82", //更改坐标轴文字颜色
415
+          },
416
+        },
417
+      ],
418
+      series: [
419
+        {
420
+          name: "实考人数",
421
+          type: "bar",
422
+          barWidth: $.UnitUtil.mm2px(5),
423
+          // 柱状图最小高度
424
+          barMinHeight: $.UnitUtil.mm2px(2),
425
+          barGap: 0,
426
+          label: {
427
+            normal: {
428
+              show: true,
429
+              align: "center",
430
+              verticalAlign: "bottom",
431
+              position: "top",
432
+              distance: 0,
433
+              formatter: "{c}",
434
+            },
435
+          },
436
+          data: series_sk_data,
437
+        },
438
+        {
439
+          name: "缺考人数",
440
+          type: "bar",
441
+          barWidth: $.UnitUtil.mm2px(5),
442
+          // 柱状图最小高度
443
+          barMinHeight: $.UnitUtil.mm2px(2),
444
+          barGap: 0,
445
+          label: {
446
+            normal: {
447
+              show: true,
448
+              align: "center",
449
+              verticalAlign: "bottom",
450
+              position: "top",
451
+              distance: 0,
452
+              formatter: "{c}",
453
+            },
454
+          },
455
+          data: series_qk_data,
456
+        }
457
+      ],
458
+    };
459
+    var myEcharts = echarts.init(document.querySelector(".section_2_class_single #classExamEcharts"));
460
+    myEcharts.clear();
461
+    myEcharts.setOption(option);
462
+  }
463
+  // 各班标准差对比分析
464
+  function initClassStdEcharts() {
465
+    var xAxis_data = [
466
+      "全年级",
467
+      "八年级一班",
468
+      "八年级二班",
469
+      "八年级三班",
470
+      "八年级四班"
471
+    ];
472
+    var series_data = [15, 10, 3, 14, 7];
473
+    var option = {
474
+      animation: false,
475
+      color: ["#5C99FF"],
476
+      legend: {
477
+        itemWidth: $.UnitUtil.mm2px(2),
478
+        itemHeight: $.UnitUtil.mm2px(2),
479
+        top: "bottom",
480
+        data: ["标准差"],
481
+      },
482
+      grid: {
483
+        top: $.UnitUtil.mm2px(10),
484
+        left: 0,
485
+        right: 0,
486
+        bottom: $.UnitUtil.mm2px(8),
487
+        containLabel: true,
488
+      },
489
+      xAxis: [
490
+        {
491
+          type: "category",
492
+          data: xAxis_data,
493
+          axisLabel: {
494
+            color: "#5F6E82", //更改坐标轴文字颜色
495
+            interval: 0
496
+          },
497
+          axisTick: {
498
+            alignWithLabel: true,
499
+          },
500
+          boundaryGap: true,
501
+          triggerEvent: true,
502
+          axisLine: {
503
+            show: true, //是否显示轴线
504
+            lineStyle: {
505
+              color: "#DADADA", //刻度线的颜色
506
+            },
507
+          },
508
+        },
509
+      ],
510
+      yAxis: [
511
+        {
512
+          type: "value",
513
+          axisTick: {
514
+            show: false, //刻度
515
+          },
516
+          axisLine: {
517
+            show: false, //是否显示轴线
518
+            lineStyle: {
519
+              color: "#DADADA", //刻度线的颜色
520
+            },
521
+          },
522
+          splitLine: {
523
+            //网格线
524
+            lineStyle: {
525
+              type: "dotted", //设置网格线类型 dotted:虚线   solid:实线
526
+            },
527
+            show: true, //隐藏或显示
528
+          },
529
+          axisLabel: {
530
+            color: "#5F6E82", //更改坐标轴文字颜色
531
+          },
532
+        },
533
+      ],
534
+      series: [
535
+        {
536
+          name: "标准差",
537
+          type: "bar",
538
+          barWidth: $.UnitUtil.mm2px(5),
539
+          // 柱状图最小高度
540
+          barMinHeight: $.UnitUtil.mm2px(2),
541
+          barGap: 0,
542
+          label: {
543
+            normal: {
544
+              show: true,
545
+              align: "center",
546
+              verticalAlign: "bottom",
547
+              position: "top",
548
+              distance: 0,
549
+              formatter: "{c}",
550
+            },
551
+          },
552
+          data: series_data,
553
+        }
554
+      ]
555
+    };
556
+    var myEcharts = echarts.init(document.querySelector(".section_2_class_single #classStdEcharts"));
557
+    myEcharts.clear();
558
+    myEcharts.setOption(option);
559
+  }
560
+  initClassScoreEcharts();
561
+  initClassRateEcharts();
562
+  initClassExamEcharts();
563
+  initClassStdEcharts();
564
+});

+ 325
- 326
js/section_1.js View File

@@ -1,15 +1,16 @@
1
-function initAverageScoreEcharts() {
2
-  var itemStyle = {
3
-    normal: {
4
-      label: {
5
-        show: true, //开启显示数值
6
-        position: "top" //数值在上方显示
1
+$(function () {
2
+  function initAverageScoreEcharts() {
3
+    var itemStyle = {
4
+      normal: {
5
+        label: {
6
+          show: true, //开启显示数值
7
+          position: "top" //数值在上方显示
8
+        }
7 9
       }
8
-    }
9
-  };
10
-  var xAxis_data = ["一般", "二班"]
11
-  var curlegend = ["满分", "最高分", "最低分", "平均分"];
12
-  var curseries = [{
10
+    };
11
+    var xAxis_data = ["一般", "二班"]
12
+    var curlegend = ["满分", "最高分", "最低分", "平均分"];
13
+    var curseries = [{
13 14
       name: "满分",
14 15
       type: "bar",
15 16
       barWidth: $.UnitUtil.mm2px(5),
@@ -49,92 +50,92 @@ function initAverageScoreEcharts() {
49 50
       data: [40, 50],
50 51
       itemStyle: itemStyle
51 52
     }
52
-  ];
53
-  var option = {
54
-    animation: false,
55
-    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
56
-    title: {
57
-      text: "分",
58
-      x: "left",
59
-      y: "top",
60
-      textStyle: {
61
-        color: "#5F6E82",
62
-        fontSize: $.UnitUtil.mm2px(3),
63
-        fontWeight: 500
64
-      }
65
-    },
66
-    legend: {
67
-      itemWidth: $.UnitUtil.mm2px(2),
68
-      itemHeight: $.UnitUtil.mm2px(2),
69
-      top: "bottom",
70
-      data: curlegend
71
-    },
72
-    grid: {
73
-      top: $.UnitUtil.mm2px(10),
74
-      left: 0,
75
-      right: 0,
76
-      bottom: $.UnitUtil.mm2px(8),
77
-      containLabel: true,
78
-    },
79
-    xAxis: [{
80
-      type: "category",
81
-      data: xAxis_data,
82
-      axisLabel: {
83
-        color: "#5F6E82" //更改坐标轴文字颜色
53
+    ];
54
+    var option = {
55
+      animation: false,
56
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
57
+      title: {
58
+        text: "分",
59
+        x: "left",
60
+        y: "top",
61
+        textStyle: {
62
+          color: "#5F6E82",
63
+          fontSize: $.UnitUtil.mm2px(3),
64
+          fontWeight: 500
65
+        }
84 66
       },
85
-      axisTick: {
86
-        alignWithLabel: true
67
+      legend: {
68
+        itemWidth: $.UnitUtil.mm2px(2),
69
+        itemHeight: $.UnitUtil.mm2px(2),
70
+        top: "bottom",
71
+        data: curlegend
87 72
       },
88
-      boundaryGap: true,
89
-      triggerEvent: true,
90
-      axisLine: {
91
-        show: true, //是否显示轴线
92
-        lineStyle: {
93
-          color: "#DADADA" //刻度线的颜色
94
-        }
95
-      }
96
-    }],
97
-    yAxis: [{
98
-      type: "value",
99
-      axisTick: {
100
-        show: false //刻度
73
+      grid: {
74
+        top: $.UnitUtil.mm2px(10),
75
+        left: 0,
76
+        right: 0,
77
+        bottom: $.UnitUtil.mm2px(8),
78
+        containLabel: true,
101 79
       },
102
-      axisLine: {
103
-        show: false, //是否显示轴线
104
-        lineStyle: {
105
-          color: "#DADADA" //刻度线的颜色
80
+      xAxis: [{
81
+        type: "category",
82
+        data: xAxis_data,
83
+        axisLabel: {
84
+          color: "#5F6E82" //更改坐标轴文字颜色
85
+        },
86
+        axisTick: {
87
+          alignWithLabel: true
88
+        },
89
+        boundaryGap: true,
90
+        triggerEvent: true,
91
+        axisLine: {
92
+          show: true, //是否显示轴线
93
+          lineStyle: {
94
+            color: "#DADADA" //刻度线的颜色
95
+          }
106 96
         }
107
-      },
108
-      splitLine: {
109
-        //网格线
110
-        lineStyle: {
111
-          type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
97
+      }],
98
+      yAxis: [{
99
+        type: "value",
100
+        axisTick: {
101
+          show: false //刻度
112 102
         },
113
-        show: true //隐藏或显示
114
-      },
115
-      axisLabel: {
116
-        color: "#5F6E82" //更改坐标轴文字颜色
117
-      }
118
-    }],
119
-    series: curseries
120
-  };
121
-  var myEcharts = echarts.init(document.querySelector(".section1 #averagescoreEcharts"));
122
-  myEcharts.clear();
123
-  myEcharts.setOption(option);
124
-}
103
+        axisLine: {
104
+          show: false, //是否显示轴线
105
+          lineStyle: {
106
+            color: "#DADADA" //刻度线的颜色
107
+          }
108
+        },
109
+        splitLine: {
110
+          //网格线
111
+          lineStyle: {
112
+            type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
113
+          },
114
+          show: true //隐藏或显示
115
+        },
116
+        axisLabel: {
117
+          color: "#5F6E82" //更改坐标轴文字颜色
118
+        }
119
+      }],
120
+      series: curseries
121
+    };
122
+    var myEcharts = echarts.init(document.querySelector(".section1 #averagescoreEcharts"));
123
+    myEcharts.clear();
124
+    myEcharts.setOption(option);
125
+  }
125 126
 
126
-function initExcellenceRateEcharts() {
127
-  var itemStyle = {
128
-    normal: {
129
-      label: {
130
-        show: true, //开启显示数值
131
-        position: "top" //数值在上方显示
127
+  function initExcellenceRateEcharts() {
128
+    var itemStyle = {
129
+      normal: {
130
+        label: {
131
+          show: true, //开启显示数值
132
+          position: "top" //数值在上方显示
133
+        }
132 134
       }
133
-    }
134
-  };
135
-  var xAxis_data = ["一般", "二班"]
136
-  var curlegend = ["优秀率", "良好率", "及格率", "低分率"];
137
-  var curseries = [{
135
+    };
136
+    var xAxis_data = ["一般", "二班"]
137
+    var curlegend = ["优秀率", "良好率", "及格率", "低分率"];
138
+    var curseries = [{
138 139
       name: "优秀率",
139 140
       type: "bar",
140 141
       barWidth: $.UnitUtil.mm2px(5),
@@ -174,92 +175,92 @@ function initExcellenceRateEcharts() {
174 175
       data: [40, 50],
175 176
       itemStyle: itemStyle
176 177
     }
177
-  ];
178
-  var option = {
179
-    animation: false,
180
-    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
181
-    title: {
182
-      text: "分",
183
-      x: "left",
184
-      y: "top",
185
-      textStyle: {
186
-        color: "#5F6E82",
187
-        fontSize: $.UnitUtil.mm2px(3),
188
-        fontWeight: 500
189
-      }
190
-    },
191
-    legend: {
192
-      itemWidth: $.UnitUtil.mm2px(2),
193
-      itemHeight: $.UnitUtil.mm2px(2),
194
-      top: "bottom",
195
-      data: curlegend
196
-    },
197
-    grid: {
198
-      top: $.UnitUtil.mm2px(10),
199
-      left: 0,
200
-      right: 0,
201
-      bottom: $.UnitUtil.mm2px(8),
202
-      containLabel: true,
203
-    },
204
-    xAxis: [{
205
-      type: "category",
206
-      data: xAxis_data,
207
-      axisLabel: {
208
-        color: "#5F6E82" //更改坐标轴文字颜色
178
+    ];
179
+    var option = {
180
+      animation: false,
181
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
182
+      title: {
183
+        text: "分",
184
+        x: "left",
185
+        y: "top",
186
+        textStyle: {
187
+          color: "#5F6E82",
188
+          fontSize: $.UnitUtil.mm2px(3),
189
+          fontWeight: 500
190
+        }
209 191
       },
210
-      axisTick: {
211
-        alignWithLabel: true
192
+      legend: {
193
+        itemWidth: $.UnitUtil.mm2px(2),
194
+        itemHeight: $.UnitUtil.mm2px(2),
195
+        top: "bottom",
196
+        data: curlegend
212 197
       },
213
-      boundaryGap: true,
214
-      triggerEvent: true,
215
-      axisLine: {
216
-        show: true, //是否显示轴线
217
-        lineStyle: {
218
-          color: "#DADADA" //刻度线的颜色
219
-        }
220
-      }
221
-    }],
222
-    yAxis: [{
223
-      type: "value",
224
-      axisTick: {
225
-        show: false //刻度
198
+      grid: {
199
+        top: $.UnitUtil.mm2px(10),
200
+        left: 0,
201
+        right: 0,
202
+        bottom: $.UnitUtil.mm2px(8),
203
+        containLabel: true,
226 204
       },
227
-      axisLine: {
228
-        show: false, //是否显示轴线
229
-        lineStyle: {
230
-          color: "#DADADA" //刻度线的颜色
205
+      xAxis: [{
206
+        type: "category",
207
+        data: xAxis_data,
208
+        axisLabel: {
209
+          color: "#5F6E82" //更改坐标轴文字颜色
210
+        },
211
+        axisTick: {
212
+          alignWithLabel: true
213
+        },
214
+        boundaryGap: true,
215
+        triggerEvent: true,
216
+        axisLine: {
217
+          show: true, //是否显示轴线
218
+          lineStyle: {
219
+            color: "#DADADA" //刻度线的颜色
220
+          }
231 221
         }
232
-      },
233
-      splitLine: {
234
-        //网格线
235
-        lineStyle: {
236
-          type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
222
+      }],
223
+      yAxis: [{
224
+        type: "value",
225
+        axisTick: {
226
+          show: false //刻度
237 227
         },
238
-        show: true //隐藏或显示
239
-      },
240
-      axisLabel: {
241
-        color: "#5F6E82" //更改坐标轴文字颜色
242
-      }
243
-    }],
244
-    series: curseries
245
-  };
246
-  var myEcharts = echarts.init(document.querySelector(".section1 #excellencerateEcharts"));
247
-  myEcharts.clear();
248
-  myEcharts.setOption(option);
249
-}
228
+        axisLine: {
229
+          show: false, //是否显示轴线
230
+          lineStyle: {
231
+            color: "#DADADA" //刻度线的颜色
232
+          }
233
+        },
234
+        splitLine: {
235
+          //网格线
236
+          lineStyle: {
237
+            type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
238
+          },
239
+          show: true //隐藏或显示
240
+        },
241
+        axisLabel: {
242
+          color: "#5F6E82" //更改坐标轴文字颜色
243
+        }
244
+      }],
245
+      series: curseries
246
+    };
247
+    var myEcharts = echarts.init(document.querySelector(".section1 #excellencerateEcharts"));
248
+    myEcharts.clear();
249
+    myEcharts.setOption(option);
250
+  }
250 251
 
251
-function initExamnumEcharts() {
252
-  var itemStyle = {
253
-    normal: {
254
-      label: {
255
-        show: true, //开启显示数值
256
-        position: "top" //数值在上方显示
252
+  function initExamnumEcharts() {
253
+    var itemStyle = {
254
+      normal: {
255
+        label: {
256
+          show: true, //开启显示数值
257
+          position: "top" //数值在上方显示
258
+        }
257 259
       }
258
-    }
259
-  };
260
-  var xAxis_data = ["一般", "二班"]
261
-  var curlegend = ["实考人数", "缺考人数"];
262
-  var curseries = [{
260
+    };
261
+    var xAxis_data = ["一般", "二班"]
262
+    var curlegend = ["实考人数", "缺考人数"];
263
+    var curseries = [{
263 264
       name: "实考人数",
264 265
       type: "bar",
265 266
       barWidth: $.UnitUtil.mm2px(5),
@@ -279,175 +280,173 @@ function initExamnumEcharts() {
279 280
       data: [50, 60],
280 281
       itemStyle: itemStyle
281 282
     }
282
-  ];
283
-  var option = {
284
-    animation: false,
285
-    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
286
-    title: {
287
-      text: "分",
288
-      x: "left",
289
-      y: "top",
290
-      textStyle: {
291
-        color: "#5F6E82",
292
-        fontSize: $.UnitUtil.mm2px(3),
293
-        fontWeight: 500
294
-      }
295
-    },
296
-    legend: {
297
-      itemWidth: $.UnitUtil.mm2px(2),
298
-      itemHeight: $.UnitUtil.mm2px(2),
299
-      top: "bottom",
300
-      data: curlegend
301
-    },
302
-    grid: {
303
-      top: $.UnitUtil.mm2px(10),
304
-      left: 0,
305
-      right: 0,
306
-      bottom: $.UnitUtil.mm2px(8),
307
-      containLabel: true,
308
-    },
309
-    xAxis: [{
310
-      type: "category",
311
-      data: xAxis_data,
312
-      axisLabel: {
313
-        color: "#5F6E82" //更改坐标轴文字颜色
283
+    ];
284
+    var option = {
285
+      animation: false,
286
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
287
+      title: {
288
+        text: "分",
289
+        x: "left",
290
+        y: "top",
291
+        textStyle: {
292
+          color: "#5F6E82",
293
+          fontSize: $.UnitUtil.mm2px(3),
294
+          fontWeight: 500
295
+        }
314 296
       },
315
-      axisTick: {
316
-        alignWithLabel: true
297
+      legend: {
298
+        itemWidth: $.UnitUtil.mm2px(2),
299
+        itemHeight: $.UnitUtil.mm2px(2),
300
+        top: "bottom",
301
+        data: curlegend
317 302
       },
318
-      boundaryGap: true,
319
-      triggerEvent: true,
320
-      axisLine: {
321
-        show: true, //是否显示轴线
322
-        lineStyle: {
323
-          color: "#DADADA" //刻度线的颜色
324
-        }
325
-      }
326
-    }],
327
-    yAxis: [{
328
-      type: "value",
329
-      axisTick: {
330
-        show: false //刻度
303
+      grid: {
304
+        top: $.UnitUtil.mm2px(10),
305
+        left: 0,
306
+        right: 0,
307
+        bottom: $.UnitUtil.mm2px(8),
308
+        containLabel: true,
331 309
       },
332
-      axisLine: {
333
-        show: false, //是否显示轴线
334
-        lineStyle: {
335
-          color: "#DADADA" //刻度线的颜色
310
+      xAxis: [{
311
+        type: "category",
312
+        data: xAxis_data,
313
+        axisLabel: {
314
+          color: "#5F6E82" //更改坐标轴文字颜色
315
+        },
316
+        axisTick: {
317
+          alignWithLabel: true
318
+        },
319
+        boundaryGap: true,
320
+        triggerEvent: true,
321
+        axisLine: {
322
+          show: true, //是否显示轴线
323
+          lineStyle: {
324
+            color: "#DADADA" //刻度线的颜色
325
+          }
336 326
         }
337
-      },
338
-      splitLine: {
339
-        //网格线
340
-        lineStyle: {
341
-          type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
327
+      }],
328
+      yAxis: [{
329
+        type: "value",
330
+        axisTick: {
331
+          show: false //刻度
342 332
         },
343
-        show: true //隐藏或显示
344
-      },
345
-      axisLabel: {
346
-        color: "#5F6E82" //更改坐标轴文字颜色
347
-      }
348
-    }],
349
-    series: curseries
350
-  };
351
-  var myEcharts = echarts.init(document.querySelector(".section1 #examnumEcharts"));
352
-  myEcharts.clear();
353
-  myEcharts.setOption(option);
354
-}
333
+        axisLine: {
334
+          show: false, //是否显示轴线
335
+          lineStyle: {
336
+            color: "#DADADA" //刻度线的颜色
337
+          }
338
+        },
339
+        splitLine: {
340
+          //网格线
341
+          lineStyle: {
342
+            type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
343
+          },
344
+          show: true //隐藏或显示
345
+        },
346
+        axisLabel: {
347
+          color: "#5F6E82" //更改坐标轴文字颜色
348
+        }
349
+      }],
350
+      series: curseries
351
+    };
352
+    var myEcharts = echarts.init(document.querySelector(".section1 #examnumEcharts"));
353
+    myEcharts.clear();
354
+    myEcharts.setOption(option);
355
+  }
355 356
 
356
-function initbzcEcharts() {
357
-  var itemStyle = {
358
-    normal: {
359
-      label: {
360
-        show: true, //开启显示数值
361
-        position: "top" //数值在上方显示
362
-      }
363
-    }
364
-  };
365
-  var xAxis_data = ["一般", "二班"]
366
-  var curlegend = ["标准差"];
367
-  var curseries = [{
368
-    name: "标准差",
369
-    type: "bar",
370
-    barWidth: $.UnitUtil.mm2px(5),
371
-    // 柱状图最小高度
372
-    barMinHeight: $.UnitUtil.mm2px(2),
373
-    barGap: 0,
374
-    data: [60, 70],
375
-    itemStyle: itemStyle
376
-  }];
377
-  var option = {
378
-    animation: false,
379
-    color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
380
-    title: {
381
-      text: "分",
382
-      x: "left",
383
-      y: "top",
384
-      textStyle: {
385
-        color: "#5F6E82",
386
-        fontSize: $.UnitUtil.mm2px(3),
387
-        fontWeight: 500
357
+  function initbzcEcharts() {
358
+    var itemStyle = {
359
+      normal: {
360
+        label: {
361
+          show: true, //开启显示数值
362
+          position: "top" //数值在上方显示
363
+        }
388 364
       }
389
-    },
390
-    legend: {
391
-      itemWidth: $.UnitUtil.mm2px(2),
392
-      itemHeight: $.UnitUtil.mm2px(2),
393
-      top: "bottom",
394
-      data: curlegend
395
-    },
396
-    grid: {
397
-      top: $.UnitUtil.mm2px(10),
398
-      left: 0,
399
-      right: 0,
400
-      bottom: $.UnitUtil.mm2px(8),
401
-      containLabel: true,
402
-    },
403
-    xAxis: [{
404
-      type: "category",
405
-      data: xAxis_data,
406
-      axisLabel: {
407
-        color: "#5F6E82" //更改坐标轴文字颜色
365
+    };
366
+    var xAxis_data = ["一般", "二班"]
367
+    var curlegend = ["标准差"];
368
+    var curseries = [{
369
+      name: "标准差",
370
+      type: "bar",
371
+      barWidth: $.UnitUtil.mm2px(5),
372
+      // 柱状图最小高度
373
+      barMinHeight: $.UnitUtil.mm2px(2),
374
+      barGap: 0,
375
+      data: [60, 70],
376
+      itemStyle: itemStyle
377
+    }];
378
+    var option = {
379
+      animation: false,
380
+      color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
381
+      title: {
382
+        text: "分",
383
+        x: "left",
384
+        y: "top",
385
+        textStyle: {
386
+          color: "#5F6E82",
387
+          fontSize: $.UnitUtil.mm2px(3),
388
+          fontWeight: 500
389
+        }
408 390
       },
409
-      axisTick: {
410
-        alignWithLabel: true
391
+      legend: {
392
+        itemWidth: $.UnitUtil.mm2px(2),
393
+        itemHeight: $.UnitUtil.mm2px(2),
394
+        top: "bottom",
395
+        data: curlegend
411 396
       },
412
-      boundaryGap: true,
413
-      triggerEvent: true,
414
-      axisLine: {
415
-        show: true, //是否显示轴线
416
-        lineStyle: {
417
-          color: "#DADADA" //刻度线的颜色
418
-        }
419
-      }
420
-    }],
421
-    yAxis: [{
422
-      type: "value",
423
-      axisTick: {
424
-        show: false //刻度
397
+      grid: {
398
+        top: $.UnitUtil.mm2px(10),
399
+        left: 0,
400
+        right: 0,
401
+        bottom: $.UnitUtil.mm2px(8),
402
+        containLabel: true,
425 403
       },
426
-      axisLine: {
427
-        show: false, //是否显示轴线
428
-        lineStyle: {
429
-          color: "#DADADA" //刻度线的颜色
404
+      xAxis: [{
405
+        type: "category",
406
+        data: xAxis_data,
407
+        axisLabel: {
408
+          color: "#5F6E82" //更改坐标轴文字颜色
409
+        },
410
+        axisTick: {
411
+          alignWithLabel: true
412
+        },
413
+        boundaryGap: true,
414
+        triggerEvent: true,
415
+        axisLine: {
416
+          show: true, //是否显示轴线
417
+          lineStyle: {
418
+            color: "#DADADA" //刻度线的颜色
419
+          }
430 420
         }
431
-      },
432
-      splitLine: {
433
-        //网格线
434
-        lineStyle: {
435
-          type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
421
+      }],
422
+      yAxis: [{
423
+        type: "value",
424
+        axisTick: {
425
+          show: false //刻度
436 426
         },
437
-        show: true //隐藏或显示
438
-      },
439
-      axisLabel: {
440
-        color: "#5F6E82" //更改坐标轴文字颜色
441
-      }
442
-    }],
443
-    series: curseries
444
-  };
445
-  var myEcharts = echarts.init(document.querySelector(".section1 #bzcEcharts"));
446
-  myEcharts.clear();
447
-  myEcharts.setOption(option);
448
-}
449
-$(function () {
450
-  // outerHeight(true) 高度为 height+margin+padding+border
427
+        axisLine: {
428
+          show: false, //是否显示轴线
429
+          lineStyle: {
430
+            color: "#DADADA" //刻度线的颜色
431
+          }
432
+        },
433
+        splitLine: {
434
+          //网格线
435
+          lineStyle: {
436
+            type: "dotted" //设置网格线类型 dotted:虚线   solid:实线
437
+          },
438
+          show: true //隐藏或显示
439
+        },
440
+        axisLabel: {
441
+          color: "#5F6E82" //更改坐标轴文字颜色
442
+        }
443
+      }],
444
+      series: curseries
445
+    };
446
+    var myEcharts = echarts.init(document.querySelector(".section1 #bzcEcharts"));
447
+    myEcharts.clear();
448
+    myEcharts.setOption(option);
449
+  }
451 450
   var parameter = $(".section_1_html_root").data("page-params");
452 451
   console.log("section_1:parameter", parameter);
453 452
   initAverageScoreEcharts();

+ 103
- 104
js/section_3.js View File

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

+ 103
- 104
js/section_4.js View File

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

+ 116
- 1
sections/scoreAnalysis/section_2_class_single.html View File

@@ -5,9 +5,124 @@
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/scoreAnalysis/section_2_class_single.css">
8 9
 </head>
9 10
 <body>
10
-  <div class="page_root"></div>
11
+  <div class="page_root section_2_class_single">
12
+    <h3 class="section_title_3">1.2 语文成绩对比</h3>
13
+    <h4 class="section_title_4">1.2.1 各班满分、最高分、最低分、平均分对比分析</h4>
14
+    <div id="classScoreEcharts" style="margin: 0 4mm 4mm;height: 68mm;"></div>
15
+    <div class="echarts_result">
16
+      <div>上图统计结果表示:</div>
17
+      <div class="echarts_result_content">
18
+        <div><span class="bg_5699FF"></span>高于年级平均分的班级:八年级一班</div>
19
+        <div><span class="bg_FF5F56"></span>低于年级平均分的班级:八年级二班、八年级三班、八年级四班</div>
20
+      </div>
21
+    </div>
22
+    <h4 class="section_title_4">1.2.2 各班优秀率、良好率、及格率、低分率对比分析</h4>
23
+    <div id="classRateEcharts" style="margin: 0 4mm 4mm;height: 78mm;"></div>
24
+    <div class="echarts_result">
25
+      <div>上图统计结果表示:</div>
26
+      <div class="echarts_result_content">
27
+        <div><span class="bg_5699FF"></span>优秀率最高的班级:八年级二班</div>
28
+        <div><span class="bg_FF5F56"></span>良好率最高的班级:八年级三班</div>
29
+        <div><span class="bg_5EC5C8"></span>及格率最高的班级:八年级四班</div>
30
+        <div><span class="bg_F1982B"></span>低分率最高的班级:八年级一班</div>
31
+      </div>
32
+    </div>
33
+  </div>
34
+  <div class="page_root section_2_class_single">
35
+    <h4 class="section_title_4">1.2.3 各班实考人数、缺考人数对比</h4>
36
+    <div id="classExamEcharts" style="margin: 0 4mm 4mm;height: 78mm;"></div>
37
+    <div class="echarts_result">
38
+      <div>上图统计结果表示:</div>
39
+      <div class="echarts_result_content">
40
+        <div><span class="bg_5699FF"></span>实考人数最多的班级:八年级一班、八年级二班、八年级三班</div>
41
+        <div><span class="bg_FF5F56"></span>缺考人数最多的班级:八年级四班</div>
42
+      </div>
43
+    </div>
44
+    <h4 class="section_title_4">1.2.4 各班标准差对比分析</h4>
45
+    <div id="classStdEcharts" style="margin: 0 4mm 4mm;height: 63mm;"></div>
46
+  </div>
47
+  <div class="page_root section_2_class_single">
48
+    <h4 class="section_title_4">1.2.5 班级语文整体分析</h4>
49
+    <table border="1" class="my_table">
50
+      <thead>
51
+        <tr>
52
+          <th>班级</th>
53
+          <th class="w16mm">实考人数</th>
54
+          <th class="w16mm">缺考人数</th>
55
+          <th class="w10mm">满分</th>
56
+          <th class="w12mm">最高分</th>
57
+          <th class="w12mm">最低分</th>
58
+          <th class="w12mm">平均分</th>
59
+          <th class="w14mm">优秀率</th>
60
+          <th class="w14mm">良好率</th>
61
+          <th class="w14mm">及格率</th>
62
+          <th class="w14mm">低分率</th>
63
+          <th class="w12mm">标准差</th>
64
+        </tr>
65
+      </thead>
66
+      <tbody>
67
+        <tr>
68
+          <td><div class="my_cell">全年级</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
+          <td><div class="my_cell">5</div></td>
78
+          <td><div class="my_cell">4%</div></td>
79
+          <td><div class="my_cell">4%</div></td>
80
+        </tr>
81
+        <tr>
82
+          <td><div class="my_cell">八年级一班</div></td>
83
+          <td><div class="my_cell">5</div></td>
84
+          <td><div class="my_cell">4%</div></td>
85
+          <td><div class="my_cell">5</div></td>
86
+          <td><div class="my_cell">4%</div></td>
87
+          <td><div class="my_cell">5</div></td>
88
+          <td><div class="my_cell">4%</div></td>
89
+          <td><div class="my_cell">5</div></td>
90
+          <td><div class="my_cell">4%</div></td>
91
+          <td><div class="my_cell">5</div></td>
92
+          <td><div class="my_cell">4%</div></td>
93
+          <td><div class="my_cell">4%</div></td>
94
+        </tr>
95
+        <tr>
96
+          <td><div class="my_cell">八年级一班</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
+          <td><div class="my_cell">5</div></td>
104
+          <td><div class="my_cell">4%</div></td>
105
+          <td><div class="my_cell">5</div></td>
106
+          <td><div class="my_cell">4%</div></td>
107
+          <td><div class="my_cell">4%</div></td>
108
+        </tr>
109
+        <tr>
110
+          <td><div class="my_cell">八年级一班</div></td>
111
+          <td><div class="my_cell">5</div></td>
112
+          <td><div class="my_cell">4%</div></td>
113
+          <td><div class="my_cell">5</div></td>
114
+          <td><div class="my_cell">4%</div></td>
115
+          <td><div class="my_cell">5</div></td>
116
+          <td><div class="my_cell">4%</div></td>
117
+          <td><div class="my_cell">5</div></td>
118
+          <td><div class="my_cell">4%</div></td>
119
+          <td><div class="my_cell">5</div></td>
120
+          <td><div class="my_cell">4%</div></td>
121
+          <td><div class="my_cell">4%</div></td>
122
+        </tr>
123
+      </tbody>
124
+    </table>
125
+  </div>
11 126
   <script src="../../js/scoreAnalysis/section_2_class_single.js"></script>
12 127
 </body>
13 128
 </html>

+ 11
- 11
sections/section_1.html View File

@@ -113,17 +113,17 @@
113 113
         <thead>
114 114
           <tr>
115 115
             <th>科目</th>
116
-            <th>实考人数</th>
117
-            <th>缺考人数</th>
118
-            <th>满分</th>
119
-            <th>最高分</th>
120
-            <th>最低分</th>
121
-            <th>平均分</th>
122
-            <th>优秀率</th>
123
-            <th>良好率</th>
124
-            <th>及格率</th>
125
-            <th>低分率</th>
126
-            <th>标准差</th>
116
+            <th class="w16mm">实考人数</th>
117
+            <th class="w16mm">缺考人数</th>
118
+            <th class="w10mm">满分</th>
119
+            <th class="w12mm">最高分</th>
120
+            <th class="w12mm">最低分</th>
121
+            <th class="w12mm">平均分</th>
122
+            <th class="w14mm">优秀率</th>
123
+            <th class="w14mm">良好率</th>
124
+            <th class="w14mm">及格率</th>
125
+            <th class="w14mm">低分率</th>
126
+            <th class="w12mm">标准差</th>
127 127
           </tr>
128 128
         </thead>
129 129
         <tbody>

+ 5
- 5
sections/section_3.html View File

@@ -29,11 +29,11 @@
29 29
       <thead>
30 30
         <tr>
31 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>
32
+          <th colspan="2" class="w29mm">语文</th>
33
+          <th colspan="2" class="w29mm">数学</th>
34
+          <th colspan="2" class="w29mm">英语</th>
35
+          <th colspan="2" class="w29mm">物理</th>
36
+          <th colspan="2" class="w29mm">地理</th>
37 37
         </tr>
38 38
         <tr>
39 39
           <th>人数</th>

+ 5
- 5
sections/section_4.html View File

@@ -29,11 +29,11 @@
29 29
       <thead>
30 30
         <tr>
31 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>
32
+          <th colspan="2" class="w29mm">语文</th>
33
+          <th colspan="2" class="w29mm">数学</th>
34
+          <th colspan="2" class="w29mm">英语</th>
35
+          <th colspan="2" class="w29mm">物理</th>
36
+          <th colspan="2" class="w29mm">地理</th>
37 37
         </tr>
38 38
         <tr>
39 39
           <th>人数</th>

Loading…
Cancel
Save