refactor: ts+echarts+resize方式简化

Former-commit-id: 0a85c26f3c27843cd4e20b367e62d1f9b40370d9

src/views/dashboard/components/RadarChart.vue

@@ -7,15 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  nextTick,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  onMounted
-} from 'vue';
-import { init, EChartsOption } from 'echarts';
-import resize from '@/utils/resize';
+import * as echarts from 'echarts';
 
 const props = defineProps({
   id: {
@@ -38,89 +30,71 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  radarChart.setOption({
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['预定数量', '下单数量', '发货数量'],
-      textStyle: {
-        color: '#999'
-      }
-    },
-    radar: {
-      // shape: 'circle',
-      radius: '60%',
-      indicator: [
-        { name: '家用电器' },
-        { name: '服装箱包' },
-        { name: '运动户外' },
-        { name: '手机数码' },
-        { name: '汽车用品' },
-        { name: '家具厨具' }
-      ]
-    },
-    series: [
-      {
-        name: 'Budget vs spending',
-        type: 'radar',
-        itemStyle: {
-          borderRadius: 6,
-          color: function (params: any) {
-            //自定义颜色
-            const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
-            return colorList[params.dataIndex];
-          }
-        },
-        data: [
-          {
-            value: [400, 400, 400, 400, 400, 400],
-            name: '预定数量'
-          },
-          {
-            value: [300, 300, 300, 300, 300, 300],
-            name: '下单数量'
-          },
-          {
-            value: [200, 200, 200, 200, 200, 200],
-            name: '发货数量'
-          }
-        ]
-      }
+const options = {
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['预定数量', '下单数量', '发货数量'],
+    textStyle: {
+      color: '#999'
+    }
+  },
+  radar: {
+    // shape: 'circle',
+    radius: '60%',
+    indicator: [
+      { name: '家用电器' },
+      { name: '服装箱包' },
+      { name: '运动户外' },
+      { name: '手机数码' },
+      { name: '汽车用品' },
+      { name: '家具厨具' }
     ]
-  } as EChartsOption);
-
-  chart.value = radarChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      itemStyle: {
+        borderRadius: 6,
+        color: function (params: any) {
+          //自定义颜色
+          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
+          return colorList[params.dataIndex];
+        }
+      },
+      data: [
+        {
+          value: [400, 400, 400, 400, 400, 400],
+          name: '预定数量'
+        },
+        {
+          value: [300, 300, 300, 300, 300, 300],
+          name: '下单数量'
+        },
+        {
+          value: [200, 200, 200, 200, 200, 200],
+          name: '发货数量'
+        }
+      ]
+    }
+  ]
+};
 
 onMounted(() => {
-  mounted();
-  nextTick(() => {
-    initChart();
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+
+  window.addEventListener('resize', () => {
+    chart.resize();
   });
 });
 </script>
-
-<style lang="scss" scoped></style>