feat：完善功能

src/views/monitor/components/alarmRate.vue

@@ -29,25 +29,45 @@
 
   const { id, setOption } = useEchart()
 
-  var defaultCofig = {
+  let params = null
+
+  let getTotal = () => {
+    return props.dataList.reduce((per, cur) => {
+      return per + cur.count
+    }, 0)
+  }
+
+  let defaultCofig = {
     color: [],
     legend: {
       orient: 'vertical',
-      bottom: 'center',
+      y: 'center',
       left: '50%',
       itemWidth: fitChartSize(12),
       itemHeight: fitChartSize(12),
-      itemGap: fitChartSize(10),
+      itemGap: fitChartSize(6),
+      formatter: (name) => {
+        let obj = props.dataList.find((item) => item.name == name)
+        return `{name|${name}} {value|${obj?.value}}{value|%}`
+      },
       textStyle: {
-        color: '#ffffff',
-        fontSize: fitChartSize(16)
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          value: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          }
+        }
       }
     },
     series: [
       {
         type: 'pie',
-        center: ['30%', '50%'],
-        radius: ['30%', '40%'],
+        center: ['24%', '50%'],
+        radius: ['35%', '50%'],
         itemStyle: {
           borderWidth: fitChartSize(4),
           borderColor: '#093672'
@@ -64,7 +84,7 @@
               padding: [0, 0, 5, 0]
             },
             name: {
-              color: '#7894A8',
+              color: '#fff',
               fontSize: fitChartSize(12)
             }
           }
@@ -79,28 +99,40 @@
 
   watch(
     () => props.dataList,
-    (newVal) => {
-      if (newVal.length > 0) {
-        nextTick(() => {
-          defaultCofig.color = props.colors
-          defaultCofig.series[0].data = props.dataList
-          defaultCofig.series[0].label.formatter = () => {
-            return `{value|${props.total}}` + '\n' + `{name|工单总数}`
-          }
-          setOption({
-            ...defaultCofig,
-            ...props.config
-          })
-        })
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
       }
     },
     { immediate: true }
   )
+
+  const init = () => {
+    if (!params) {
+      defaultCofig.color = props.colors
+      defaultCofig.series[0].data = props.dataList
+      defaultCofig.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
+      }
+      params = {
+        ...defaultCofig,
+        ...props.config
+      }
+    } else {
+      params.series[0].data = props.dataList
+      params.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|告警总数}`
+      }
+    }
+    setOption(params)
+  }
 </script>
 
 <style scoped lang="scss">
   .alarmRate {
-    width: vw(240);
+    width: vw(380);
     height: vh(200);
   }
 </style>