趋势分析

src/store/modules/app.ts

@@ -7,7 +7,7 @@ const state = {
 	},
 	userInfo: <any>{},
 	userRoleList: [],
-	zby: true,
+	zby: false,
 	timestamp: new Date().getTime()
 }
 

src/views/staging/zbgly/left/trend-analysis-chart.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="chart-main">
     <div class="chart-ref" ref="ref_chart"/>
+    <div class="legend">
+      <div class="green">
+        <div/>出勤
+      </div>
+      <div class="red">
+        <div/>异常
+      </div>
+    </div>
   </div>
 </template>
 
@@ -36,90 +44,56 @@ export default defineComponent({
       const option = {
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#999'
-            }
-          }
-        },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
-        legend: {
-          data: ['Evaporation', 'Precipitation', 'Temperature']
         },
         xAxis: [
           {
             type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisPointer: {
-              type: 'shadow'
+            data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#ffffff',
             }
           }
         ],
         yAxis: [
           {
             type: 'value',
-            name: 'Precipitation',
-            min: 0,
-            max: 250,
-            interval: 50,
-            axisLabel: {
-              formatter: '{value} ml'
-            }
+            name: '数量/个',
+            interval: 4,
           },
           {
             type: 'value',
-            name: 'Temperature',
-            min: 0,
-            max: 25,
-            interval: 5,
-            axisLabel: {
-              formatter: '{value} °C'
-            }
+            name: '占比/%',
+            interval: 4,
           }
         ],
         series: [
           {
-            name: 'Evaporation',
+            name: '出勤',
             type: 'bar',
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' ml';
-              }
-            },
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ]
+            data: [15, 18, 13, 5, 7, 10, 22]
           },
           {
-            name: 'Precipitation',
+            name: '异常',
             type: 'bar',
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' ml';
-              }
-            },
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
+            data: [15, 18, 13, 5, 7, 10, 22].reverse()
           },
           {
-            name: 'Temperature',
+            name: '出勤率',
             type: 'line',
             yAxisIndex: 1,
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + ' °C';
-              }
-            },
-            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45]
+          },
+          {
+            name: '异常率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45].reverse()
           }
         ]
       };
@@ -140,9 +114,41 @@ export default defineComponent({
   .chart-main {
     width: 100%;
     height: 100%;
+    position: relative;
     .chart-ref {
       width: 100%;
       height: 100%;
     }
+    .legend {
+      position: absolute;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      bottom: 0;
+      >div {
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #EFF7FF;
+        display: flex;
+        align-items: center;
+        >div {
+          margin-right: 4px;
+          width: 14px;
+          height: 4px;
+        }
+        &.green {
+          >div {
+            background-color: #3EFFBB;
+          }
+          margin-right: 16px;
+        }
+        &.red {
+          >div {
+            background-color: #E5004F;
+          }
+        }
+      }
+    }
   }
 </style>