From 8661aca703171e0b6deed68a2630f713a1950878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sat, 8 Jan 2022 21:48:30 +0800
Subject: [PATCH] =?UTF-8?q?Gauge=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ZR.Vue/src/components/Echarts/Gauge.vue | 95 ++++++++++++++++---------
 1 file changed, 60 insertions(+), 35 deletions(-)

diff --git a/ZR.Vue/src/components/Echarts/Gauge.vue b/ZR.Vue/src/components/Echarts/Gauge.vue
index 4278a59..2048486 100644
--- a/ZR.Vue/src/components/Echarts/Gauge.vue
+++ b/ZR.Vue/src/components/Echarts/Gauge.vue
@@ -3,72 +3,97 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 
-require('echarts/theme/macarons') // echarts theme
-import { debounce } from '@/utils'
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
 
 export default {
   props: {
+    name: {
+      type: String,
+      default: "业务指标",
+    },
+    min: {
+      type: [Object, Number],
+      default: 0,
+    },
+    max: {
+      type: [Object, Number],
+      default: 0,
+    },
+    data: {
+      type: Array,
+      default: () => [
+        {
+          value: "",
+          name: "占比",
+        },
+      ],
+    },
     className: {
       type: String,
-      default: 'chart'
+      default: "chart",
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '300px'
-    }
+      default: "300px",
+    },
   },
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+    };
   },
   mounted() {
-    this.initChart()
+    this.initChart();
     this.__resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    window.removeEventListener('resize', this.__resizeHandler)
-    this.chart.dispose()
-    this.chart = null
+    window.removeEventListener("resize", this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el, "macarons");
 
       this.chart.setOption({
         tooltip: {
-          formatter: '{a} <br/>{b} : {c}%'
-        },
-        toolbox: {
-          feature: {
-            restore: {},
-            saveAsImage: {}
-          }
+          formatter: "{a} <br/>{b} : {c}",
         },
+        // toolbox: {
+        //   feature: {
+        //     restore: {},
+        //     saveAsImage: {},
+        //   },
+        // },
         series: [
           {
-            name: '业务指标',
-            type: 'gauge',
-            detail: { formatter: '{value}%' },
-            data: [{ value: 50, name: '完成率' }]
-          }
-        ]
-      })
-    }
-  }
-}
+            name: this.name,
+            type: "gauge",
+            min: this.min,
+            max: this.max,
+            detail: {
+              formatter: "{value}%",
+            },
+            data: this.data,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>