refactor: ts+echarts+resize方式简化

Former-commit-id: 0a85c26f3c27843cd4e20b367e62d1f9b40370d9

src/utils/resize.ts

@@ -1,73 +0,0 @@
-import { ref } from 'vue';
-export default function () {
-  const chart = ref<any>();
-  const sidebarElm = ref<Element>();
-
-  const chartResizeHandler = () => {
-    if (chart.value) {
-      chart.value.resize();
-    }
-  };
-
-  const sidebarResizeHandler = (e: TransitionEvent) => {
-    if (e.propertyName === 'width') {
-      chartResizeHandler();
-    }
-  };
-
-  const initResizeEvent = () => {
-    window.addEventListener('resize', chartResizeHandler, {passive:true});
-  };
-
-  const destroyResizeEvent = () => {
-    window.removeEventListener('resize', chartResizeHandler);
-  };
-
-  const initSidebarResizeEvent = () => {
-    sidebarElm.value = document.getElementsByClassName('sidebar-container')[0];
-    if (sidebarElm.value) {
-      sidebarElm.value.addEventListener(
-        'transitionend',
-        sidebarResizeHandler as EventListener,
-        {passive:true}
-      );
-    }
-  };
-
-  const destroySidebarResizeEvent = () => {
-    if (sidebarElm.value) {
-      sidebarElm.value.removeEventListener(
-        'transitionend',
-        sidebarResizeHandler as EventListener
-      );
-    }
-  };
-
-  const mounted = () => {
-    initResizeEvent();
-    initSidebarResizeEvent();
-  };
-
-  const beforeDestroy = () => {
-    destroyResizeEvent();
-    destroySidebarResizeEvent();
-  };
-
-  const activated = () => {
-    initResizeEvent();
-    initSidebarResizeEvent();
-  };
-
-  const deactivated = () => {
-    destroyResizeEvent();
-    destroySidebarResizeEvent();
-  };
-
-  return {
-    chart,
-    mounted,
-    beforeDestroy,
-    activated,
-    deactivated
-  };
-}

src/views/dashboard/components/BarChart.vue

@@ -7,16 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  nextTick,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  onMounted
-} from 'vue';
-import { init, EChartsOption } from 'echarts';
 import * as echarts from 'echarts';
-import resize from '@/utils/resize';
 
 const props = defineProps({
   id: {
@@ -39,12 +30,7 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const barChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  barChart.setOption({
+const options = {
   grid: {
     left: '2%',
     right: '2%',
@@ -143,26 +129,16 @@ function initChart() {
       }
     }
   ]
-  } as EChartsOption);
-  chart.value = barChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+};
 
 onMounted(() => {
-  mounted();
-  nextTick(() => {
-    initChart();
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+
+  window.addEventListener('resize', () => {
+    chart.resize();
   });
 });
 </script>

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,12 +27,7 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const funnelChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  funnelChart.setOption({
+const options = {
   title: {
     show: true,
     text: '订单线索转化漏斗图',
@@ -104,28 +91,16 @@ function initChart() {
       ]
     }
   ]
-  } as EChartsOption);
-  chart.value = funnelChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+};
 
 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>

src/views/dashboard/components/PieChart.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: {
@@ -37,13 +29,7 @@ const props = defineProps({
     required: true
   }
 });
-
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const pieChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  pieChart.setOption({
+const options = {
   grid: {
     left: '2%',
     right: '2%',
@@ -79,29 +65,15 @@ function initChart() {
       ]
     }
   ]
-  } as EChartsOption);
-
-  chart.value = pieChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+};
 
 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>

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,12 +30,7 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  radarChart.setOption({
+const options = {
   grid: {
     left: '2%',
     right: '2%',
@@ -98,29 +85,16 @@ function initChart() {
       ]
     }
   ]
-  } as EChartsOption);
-
-  chart.value = radarChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+};
 
 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>

src/views/dashboard/index.vue

@@ -20,7 +20,7 @@ const date: Date = new Date();
 const greetings = computed(() => {
   if (date.getHours() >= 6 && date.getHours() < 8) {
     return '晨起披衣出草堂，轩窗已自喜微凉🌅！';
-  } else if (date.getHours() >= 8 && date.getHours() < 18) {
+  } else if (date.getHours() >= 8 && date.getHours() < 12) {
     return '上午好🌞！';
   } else if (date.getHours() >= 12 && date.getHours() < 18) {
     return '下午好☕！';
@@ -209,5 +209,8 @@ const greetings = computed(() => {
     display: flex;
     justify-content: space-between;
   }
+  .svg-icon {
+    fill: currentColor !important;
+  }
 }
 </style>