第一部分 优化

js/section_1.js

-function initaveragescoreEcharts() {
+function initAverageScoreEcharts() {
   var itemStyle = {
     normal: {
       label: {
   var curseries = [{
       name: "满分",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [60, 70],
       itemStyle
     {
       name: "最高分",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [50, 60],
       itemStyle
     {
       name: "最低分",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [30, 40],
       itemStyle
     {
       name: "平均分",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [40, 50],
       itemStyle
     }
   ];
   let option = {
+    animation: false,
     color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
     title: {
       text: "分",
       y: "top",
       textStyle: {
         color: "#5F6E82",
-        fontSize: 12,
+        fontSize: $.UnitUtil.mm2px(3),
         fontWeight: 500
       }
     },
     legend: {
-      itemWidth: 6,
-      itemHeight: 6,
+      itemWidth: $.UnitUtil.mm2px(2),
+      itemHeight: $.UnitUtil.mm2px(2),
       top: "bottom",
       data: curlegend
     },
     grid: {
-      top: 30,
-      left: 5,
+      top: $.UnitUtil.mm2px(10),
+      left: 0,
       right: 0,
-      bottom: "10%",
-      containLabel: true
+      bottom: $.UnitUtil.mm2px(8),
+      containLabel: true,
     },
     xAxis: [{
       type: "category",
   myEcharts.setOption(option);
 }
 
-function initexcellencerateEcharts() {
+function initExcellenceRateEcharts() {
   var itemStyle = {
     normal: {
       label: {
   var curseries = [{
       name: "优秀率",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [60, 70],
       itemStyle
     {
       name: "良好率",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [50, 60],
       itemStyle
     {
       name: "及格率",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [30, 40],
       itemStyle
     {
       name: "低分率",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [40, 50],
       itemStyle
     }
   ];
   let option = {
+    animation: false,
     color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
     title: {
       text: "分",
       y: "top",
       textStyle: {
         color: "#5F6E82",
-        fontSize: 12,
+        fontSize: $.UnitUtil.mm2px(3),
         fontWeight: 500
       }
     },
     legend: {
-      itemWidth: 6,
-      itemHeight: 6,
+      itemWidth: $.UnitUtil.mm2px(2),
+      itemHeight: $.UnitUtil.mm2px(2),
       top: "bottom",
       data: curlegend
     },
     grid: {
-      top: 30,
-      left: 5,
+      top: $.UnitUtil.mm2px(10),
+      left: 0,
       right: 0,
-      bottom: "10%",
-      containLabel: true
+      bottom: $.UnitUtil.mm2px(8),
+      containLabel: true,
     },
     xAxis: [{
       type: "category",
   myEcharts.setOption(option);
 }
 
-function initexamnumEcharts() {
+function initExamnumEcharts() {
   var itemStyle = {
     normal: {
       label: {
   var curseries = [{
       name: "实考人数",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [60, 70],
       itemStyle
     {
       name: "缺考人数",
       type: "bar",
-      barWidth: 32,
-      barMinHeight: 16,
+      barWidth: $.UnitUtil.mm2px(5),
+      // 柱状图最小高度
+      barMinHeight: $.UnitUtil.mm2px(2),
       barGap: 0,
       data: [50, 60],
       itemStyle
     }
   ];
   let option = {
+    animation: false,
     color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
     title: {
       text: "分",
       y: "top",
       textStyle: {
         color: "#5F6E82",
-        fontSize: 12,
+        fontSize: $.UnitUtil.mm2px(3),
         fontWeight: 500
       }
     },
     legend: {
-      itemWidth: 6,
-      itemHeight: 6,
+      itemWidth: $.UnitUtil.mm2px(2),
+      itemHeight: $.UnitUtil.mm2px(2),
       top: "bottom",
       data: curlegend
     },
     grid: {
-      top: 30,
-      left: 5,
+      top: $.UnitUtil.mm2px(10),
+      left: 0,
       right: 0,
-      bottom: "10%",
-      containLabel: true
+      bottom: $.UnitUtil.mm2px(8),
+      containLabel: true,
     },
     xAxis: [{
       type: "category",
   var curseries = [{
     name: "标准差",
     type: "bar",
-    barWidth: 32,
-    barMinHeight: 16,
+    barWidth: $.UnitUtil.mm2px(5),
+    // 柱状图最小高度
+    barMinHeight: $.UnitUtil.mm2px(2),
     barGap: 0,
     data: [60, 70],
     itemStyle
   }];
   let option = {
+    animation: false,
     color: ["#5C99FF", "#FF5F56", "#5EC5C8", "#f1982b"],
     title: {
       text: "分",
       y: "top",
       textStyle: {
         color: "#5F6E82",
-        fontSize: 12,
+        fontSize: $.UnitUtil.mm2px(3),
         fontWeight: 500
       }
     },
     legend: {
-      itemWidth: 6,
-      itemHeight: 6,
+      itemWidth: $.UnitUtil.mm2px(2),
+      itemHeight: $.UnitUtil.mm2px(2),
       top: "bottom",
       data: curlegend
     },
     grid: {
-      top: 30,
-      left: 5,
+      top: $.UnitUtil.mm2px(10),
+      left: 0,
       right: 0,
-      bottom: "10%",
-      containLabel: true
+      bottom: $.UnitUtil.mm2px(8),
+      containLabel: true,
     },
     xAxis: [{
       type: "category",
   // outerHeight(true) 高度为 height+margin+padding+border
   var parameter = $(".section_1_html_root").data("page-params");
   console.log("section_1:parameter", parameter);
-  initaveragescoreEcharts();
-  initexcellencerateEcharts();
-  initexamnumEcharts();
+  initAverageScoreEcharts();
+  initExcellenceRateEcharts();
+  initExamnumEcharts();
   initbzcEcharts();
 });