feat: 首页图表添加resize自适应

src/views/dashboard/components/RadarChart.vue

@@ -8,8 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import {nextTick, onMounted} from "vue";
+import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
 import {init, EChartsOption} from 'echarts'
+import resize from "@/utils/resize";
 
 const props = defineProps({
   id: {
@@ -32,10 +33,18 @@ const props = defineProps({
   }
 })
 
-function initChart() {
-  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
 
-  pieChart.setOption({
+function initChart() {
+  const radarChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  radarChart.setOption({
     title: {
       show: true,
       text: '订单状态总雷达图',
@@ -57,17 +66,17 @@ function initChart() {
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['待支付', '已发货']
+      data: ['预定数量', '下单数量','发货数量']
     },
     radar: {
       // shape: 'circle',
       indicator: [
-        { name: 'Sales', max: 6500 },
-        { name: 'Administration', max: 16000 },
-        { name: 'Information Technology', max: 30000 },
-        { name: 'Customer Support', max: 38000 },
-        { name: 'Development', max: 52000 },
-        { name: 'Marketing', max: 25000 }
+        { name: '家用电器', max: 6500 },
+        { name: '服装箱包', max: 16000 },
+        { name: '运动户外', max: 30000 },
+        { name: '手机数码', max: 38000 },
+        { name: '汽车用品', max: 52000 },
+        { name: '家具厨具', max: 25000 }
       ]
     },
     series: [
@@ -76,20 +85,39 @@ function initChart() {
         type: 'radar',
         data: [
           {
-            value: [4200, 3000, 20000, 35000, 50000, 18000],
-            name: '待支付'
+            value: [4200, 10000, 20000, 35000, 50000, 18000],
+            name: '预定数量'
           },
           {
             value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: '已发货'
+            name: '下单数量'
+          },
+          {
+            value: [5000, 12000, 23000, 18000, 31000, 11000],
+            name: '发货数量'
           }
         ]
       }
     ]
-  })
+  } as EChartsOption)
+
+  chart.value = radarChart
 }
 
+onBeforeUnmount(() => {
+  beforeDestroy()
+})
+
+onActivated(() => {
+  activated()
+})
+
+onDeactivated(() => {
+  deactivated()
+})
+
 onMounted(() => {
+  mounted()
   nextTick(() => {
     initChart()
   })