1.首页

src/api/wel/wel.js

@@ -21,6 +21,13 @@ export const getFlowTakeTime = () => {
     method: 'get',
   })
 }
+// 状态统计
+export const getFlowStatus = () => {
+  return request({
+    url: `${prefix}/flowStatus`,
+    method: 'get',
+  })
+}
 // 类型统计
 export const getFlowListType = () => {
   return request({

src/views/wel/index.vue

@@ -52,6 +52,7 @@ import {
   getFlowListMonth,
   getFlowTakeTime,
   getFlowListType,
+  getFlowStatus,
 } from "@/api/wel/wel.js";
 export default {
   name: "wel",
@@ -85,6 +86,7 @@ export default {
     this.onload();
   },
   methods: {
+    // 数据统计
     lineChart(xData, monthAddNum, monthFinishNum) {
       var myChart = this.$echarts.init(document.getElementById("lineChart"));
       //配置图表
@@ -203,18 +205,11 @@ export default {
         }, 100);
       });
     },
+    // 类型统计
     pieOneChart(data) {
       var myChart = this.$echarts.init(document.getElementById("pieItemOne"));
       //配置图表
       var option = {
-        color: [
-          "#2689FF",
-          "#6F33FF",
-          "#2356F7",
-          "#00C374",
-          "#00CFDC",
-          "#FD4D66",
-        ],
         title: {
           text: "业务类型统计",
           textStyle: {
@@ -270,7 +265,8 @@ export default {
         }, 100);
       });
     },
-    pieTwoChart() {
+    // 完成状态
+    pieTwoChart(data) {
       var myChart = this.$echarts.init(document.getElementById("pieItemTwo"));
       //配置图表
       var option = {
@@ -302,13 +298,10 @@ export default {
             name: "状态统计",
             type: "pie",
             radius: ["55%", "42%"],
-            data: [
-              { value: 140, name: "审批中" },
-              { value: 206, name: "进行中" },
-              { value: 75, name: "已完成" },
-            ],
-
+            data,
             hoverAnimation: false,
+            minAngle: 15, //最小角度
+            startAngle: 270, //起始角度
             label: {
               normal: {
                 color: "#000",
@@ -320,15 +313,13 @@ export default {
             },
             labelLine: {
               length: 30,
-              length2: 20,
-              show: true,
             },
           },
           {
             center: ["36%", "48%"],
             name: "",
             type: "pie",
-            radius: "30%",
+            radius: "28%",
             itemStyle: {
               color: "#ccc",
             },
@@ -337,6 +328,9 @@ export default {
             labelLine: {
               show: false,
             },
+            tooltip: {
+              show: false,
+            },
           },
         ],
       };
@@ -347,6 +341,7 @@ export default {
         }, 100);
       });
     },
+    // 任务耗时
     barChart(XData, YData) {
       var myChart = this.$echarts.init(document.getElementById("barChart"));
       var option = {
@@ -428,11 +423,11 @@ export default {
               color: "#4CA3FB",
             },
             label: {
-              show:true,
-              position: 'top',
+              show: true,
+              position: "top",
               color: "#000",
-              fontSize: 14
-            }
+              fontSize: 14,
+            },
           },
         ],
       };
@@ -453,6 +448,7 @@ export default {
           this.headerList[i].num = arr[i];
         }
       });
+      // 数据统计
       getFlowListMonth().then((res) => {
         const { xData, monthAddNum, monthFinishNum } = res.data.data;
         this.lineChart(xData, monthAddNum, monthFinishNum);
@@ -461,21 +457,20 @@ export default {
       getFlowListType().then((res) => {
         this.pieOneChart(res.data.data);
       });
+      // 完成状态
+      getFlowStatus().then((res) => {
+        this.pieTwoChart(res.data.data);
+      });
       // 任务耗时
       getFlowTakeTime().then((res) => {
         const { XData, YData } = res.data.data;
-        const data = XData.map(item => {
-          return item + "天"
-        })
+        const data = XData.map((item) => {
+          return item + "天";
+        });
         this.barChart(data, YData);
       });
     },
   },
-  mounted() {
-    this.pieOneChart();
-    this.pieTwoChart();
-    this.barChart();
-  },
 };
 </script>