refactor: ts+echarts+resize方式简化

Former-commit-id: 0a85c26f3c27843cd4e20b367e62d1f9b40370d9

src/views/dashboard/components/FunnelChart.vue

@@ -4,15 +4,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: {
@@ -35,97 +27,80 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
+const options = {
+  title: {
+    show: true,
+    text: '订单线索转化漏斗图',
+    x: 'center',
+    padding: 15,
+    textStyle: {
+      fontSize: 18,
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      color: '#337ecc'
+    }
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+  },
 
-function initChart() {
-  const funnelChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  funnelChart.setOption({
-    title: {
-      show: true,
-      text: '订单线索转化漏斗图',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
-    },
-
-    series: [
-      {
-        name: 'Funnel',
-        type: 'funnel',
-        left: '20%',
-        top: 60,
-        bottom: 60,
-        width: '60%',
-        sort: 'descending',
-        gap: 2,
+  series: [
+    {
+      name: 'Funnel',
+      type: 'funnel',
+      left: '20%',
+      top: 60,
+      bottom: 60,
+      width: '60%',
+      sort: 'descending',
+      gap: 2,
+      label: {
+        show: true,
+        position: 'inside'
+      },
+      labelLine: {
+        length: 10,
+        lineStyle: {
+          width: 1,
+          type: 'solid'
+        }
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      emphasis: {
         label: {
-          show: true,
-          position: 'inside'
-        },
-        labelLine: {
-          length: 10,
-          lineStyle: {
-            width: 1,
-            type: 'solid'
-          }
-        },
-        itemStyle: {
-          borderColor: '#fff',
-          borderWidth: 1
-        },
-        emphasis: {
-          label: {
-            fontSize: 20
-          }
-        },
-        data: [
-          { value: 60, name: 'Visit' },
-          { value: 40, name: 'Inquiry' },
-          { value: 20, name: 'Order' },
-          { value: 80, name: 'Click' },
-          { value: 100, name: 'Show' }
-        ]
-      }
-    ]
-  } as EChartsOption);
-  chart.value = funnelChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+          fontSize: 20
+        }
+      },
+      data: [
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry' },
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    }
+  ]
+};
 
 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>