增加目标线

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/components/BarCharts.vue

@@ -26,6 +26,14 @@ export default {
     parameter: {
       type: Object,
       default: () => { }
+    },
+    markLine: {
+      type: Number,
+      default: () => 0
+    },
+    option: {
+      type: Object,
+      default: () => { }
     }
   },
   data() {
@@ -35,7 +43,7 @@ export default {
   },
   watch: {
     title(val) {
-      this.myChart && this.myChart.setOption({title:{text:val}})
+      this.myChart && this.myChart.setOption({ title: { text: val } })
     },
     parameter: {
       handler: function (v) {
@@ -58,22 +66,48 @@ export default {
           },
           series: [
             {
-              data: obj.y,
+              name: this.legendName,
+              data: obj.y
             },
           ]
         })
+        if (this.markLine) {
+          this.myChart.setOption({
+            series: [
+              {
+                markLine: {
+                  data: [{
+                    name: '目标线',
+                    yAxis: this.markLine,
+                    label: {
+                      formatter: '{b}：'+this.legendName+'不高于20.0%,',
+                      position: 'insideStartTop'
+                    },
+                    lineStyle: {
+                      color: "red",
+                    }
+                  }],
+                  label: {
+                    color: "red",
+                    distance: [20, 8]
+                  }
+                }
+              },
+            ]
+          })
+        }
         return
       }
       // 基于dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById(this.id));
       this.myChart = myChart
       // 绘制图表
-      myChart.setOption({
+      const option = {
         title: {
           text: this.title,
-          left: this.legendName == "旷工率" ? "center" : "left",
+          left: "left",
           textStyle: {
-            fontSize: this.legendName == "旷工率" ? 24 : 18,
+            fontSize: 18,
           },
         },
         color: '#6e98ed',
@@ -89,6 +123,20 @@ export default {
             color: "#000",
           },
         },
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 0,
+            end: 100
+          },
+          {
+            type: 'inside',
+            realtime: true,
+            start: 0,
+            end: 100
+          }
+        ],
         tooltip: {},
         xAxis: {
           data: [],
@@ -96,7 +144,7 @@ export default {
         grid: {
           left: "5%",
           right: "4%",
-          bottom: "2%",
+          bottom: 40,
           containLabel: true,
         },
         // color:[ "#61a0a8",],
@@ -107,14 +155,39 @@ export default {
             type: "bar",
             data: [],
             itemStyle: {
-
               lineStyle: {
                 type: "dotted", //'dotted'虚线 'solid'实线
               },
             },
           },
         ],
-      });
+      }
+      myChart.setOption(Object.assign({}, option, this.option));
+      if (this.markLine) {
+        myChart.setOption({
+          series: [
+            {
+              markLine: {
+                data: [{
+                  name: '目标线',
+                  yAxis: this.markLine,
+                  label: {
+                    formatter: '{b}：旷工率不高于20.0%,',
+                    position: 'insideStartTop'
+                  },
+                  lineStyle: {
+                    color: "red",
+                  }
+                }],
+                label: {
+                  color: "red",
+                  distance: [20, 8]
+                }
+              }
+            },
+          ]
+        })
+      }
     },
   },
 };

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/components/LineCharts.vue

@@ -21,11 +21,11 @@ export default {
     },
     styleObj: {
       type: Object,
-      default: () => {},
+      default: () => { },
     },
     parameter: {
       type: Object,
-      default: () => {}
+      default: () => { }
     }
   },
   data() {
@@ -35,7 +35,7 @@ export default {
   },
   watch: {
     title(val) {
-      this.myChart && this.myChart.setOption({title:{text:val}})
+      this.myChart && this.myChart.setOption({ title: { text: val } })
     },
     parameter: {
       handler: function (v) {
@@ -83,7 +83,7 @@ export default {
           },
         },
         tooltip: {},
-        color:'#6e98ed',
+        color: '#6e98ed',
         xAxis: {
           type: "category",
           data: [],
@@ -91,9 +91,23 @@ export default {
         grid: {
           left: "3%",
           right: "4%",
-          bottom: "2%",
+          bottom: 40,
           containLabel: true,
         },
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 0,
+            end: 100
+          },
+          {
+            type: 'inside',
+            realtime: true,
+            start: 0,
+            end: 100
+          }
+        ],
         yAxis: {},
         series: [
           {

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/list.vue

@@ -125,7 +125,9 @@
             <bar-charts
               :title="`${type1 == 1 ? '各部门' : '个人'}${StatQuery.month}月${alignmentName}对齐情况`"
               :id="'bar_content'"
-              :legendName="'旷工率'"
+              :legendName="alignmentName"
+              :option="{title:{left:'center',textStyle:{fontSize:24}}}"
+              :markLine="0.2"
               :parameter="depStatObj.alignment"
               :styleObj="{ width: '1800px', height: '650px' }"
             />