feat：完善功能

src/views/monitor/components/alarmToday.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="alarm-today" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  let params = null
+
+  const getSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        ...item,
+        itemStyle: {
+          color: '#0D53FF'
+        }
+      }
+    })
+  }
+  const getXAxisData = () => {
+    return props.list.map((item) => item.name)
+  }
+  const init = () => {
+    if (!params) {
+      params = {
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '10%',
+          bottom: '4%',
+          containLabel: true
+        },
+        xAxis: {
+          boundaryGap: true,
+          type: 'category',
+          data: getXAxisData(),
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(5, 72, 134, 1)'
+            }
+          },
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: '#fff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: fitChartSize(12),
+            color: 'rgba(255,255,255,0.9)'
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: getSeriesData(),
+            barWidth: fitChartSize(20),
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#fff',
+                fontSize: fitChartSize(10)
+              }
+            }
+          }
+        ]
+      }
+    } else {
+      params.xAxis.data = getXAxisData()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
+  }
+</script>
+
+<style scoped lang="scss">
+  .alarm-today {
+    width: vw(400);
+    height: vh(200);
+  }
+</style>