feat：完善功能

src/views/testing/components/alarmToday.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="alarmToday" :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()
+
+  const color = ['#409eff', '#29c9c8', '#f6b936']
+
+  var params = {
+    color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
+    // legend: {
+    //   data: ['1月', '2月', '3月', '4月', '5月'],
+    //   itemGap: 15,
+    //   itemWidth: 10, // 设置宽度
+    //   itemHeight: 10,
+    //   top: '40',
+    //   right: '30',
+    //   textStyle: {
+    //     color: '#595959'
+    //   }
+    // },
+    grid: {
+      left: '4%',
+      right: '4%',
+      bottom: '5%',
+      top: '12%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        name: '月份',
+        type: 'category',
+        axisTick: {
+          alignWithLabel: false
+        },
+        axisLabel: {
+          padding: [25, 0, 0, 0]
+        },
+        data: ['1月', '2月', '3月', '4月', '5月']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+
+        axisLabel: {
+          formatter: function (params) {
+            return params
+          }
+        }
+      }
+    ],
+    series: []
+  }
+  var datas = [
+    [
+      [10, 1, 1, 2, 3],
+      [2, 11, 7, 1, 1],
+      [5, 7, 5, 1, 1]
+    ],
+    [
+      [1, 1, 1, 2, 3],
+      [2, 5, 7, 1, 1],
+      [5, 7, 5, 1, 1]
+    ],
+    [
+      [1, 1, 1, 2, 3],
+      [2, 5, 7, 1, 1],
+      [5, 7, 5, 1, 1]
+    ]
+  ]
+
+  // 变量和循环处理
+  var categories = ['1月', '2月', '3月']
+  var years = ['应完成xxx']
+  for (var i = 0; i < years.length; i++) {
+    var yearData = datas[i] // 获取对应年份的数据
+    var seriesData = [] // 用于存储每个年份对应的系列数据
+    for (var j = 0; j < categories.length; j++) {
+      var itemData = []
+      for (var k = 0; k < yearData[j].length; k++) {
+        itemData.push(yearData[j][k])
+      }
+      seriesData.push({
+        type: 'bar',
+        stack: 'stack' + (i + 1),
+        barGap: 0.5,
+        barWidth: 20,
+        label: {
+          show: true,
+          // position: 'insideTop',
+          align: 'center',
+          formatter: function (param) {
+            return param.value
+          }
+        },
+        data: itemData,
+        name: categories[j]
+      })
+    }
+    Array.prototype.push.apply(params.series, seriesData)
+  }
+
+  const init = () => {
+    setOption(params)
+  }
+  //   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 }
+  //   )
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .alarmToday {
+    width: vw(400);
+    height: vh(200);
+  }
+</style>