feat：完善功能

src/views/monitor/components/alarmRate.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="alarmRate" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: () => 123456
+    },
+    colors: {
+      type: Array,
+      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var defaultCofig = {
+    color: [],
+    legend: {
+      orient: 'vertical',
+      bottom: 'center',
+      left: '50%',
+      itemWidth: fitChartSize(12),
+      itemHeight: fitChartSize(12),
+      itemGap: fitChartSize(10),
+      textStyle: {
+        color: '#ffffff',
+        fontSize: fitChartSize(16)
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        center: ['30%', '50%'],
+        radius: ['30%', '40%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(16),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#7894A8',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: []
+      }
+    ]
+  }
+
+  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
+          })
+        })
+      }
+    },
+    { immediate: true }
+  )
+</script>
+
+<style scoped lang="scss">
+  .alarmRate {
+    width: vw(240);
+    height: vh(200);
+  }
+</style>