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,130 +30,115 @@ const props = defineProps({
   }
 });
 
-const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
-
-function initChart() {
-  const barChart = init(document.getElementById(props.id) as HTMLDivElement);
-
-  barChart.setOption({
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        crossStyle: {
-          color: '#999'
-        }
-      }
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['收入', '毛利润', '收入增长率', '利润增长率'],
-      textStyle: {
+const options = {
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      crossStyle: {
         color: '#999'
       }
+    }
+  },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['收入', '毛利润', '收入增长率', '利润增长率'],
+    textStyle: {
+      color: '#999'
+    }
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['浙江', '北京', '上海', '广东', '深圳'],
+      axisPointer: {
+        type: 'shadow'
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      min: 0,
+      max: 10000,
+      interval: 2000,
+      axisLabel: {
+        formatter: '{value} '
+      }
     },
-    xAxis: [
-      {
-        type: 'category',
-        data: ['浙江', '北京', '上海', '广东', '深圳'],
-        axisPointer: {
-          type: 'shadow'
-        }
+    {
+      type: 'value',
+      min: 0,
+      max: 100,
+      interval: 20,
+      axisLabel: {
+        formatter: '{value}%'
       }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        min: 0,
-        max: 10000,
-        interval: 2000,
-        axisLabel: {
-          formatter: '{value} '
-        }
-      },
-      {
-        type: 'value',
-        min: 0,
-        max: 100,
-        interval: 20,
-        axisLabel: {
-          formatter: '{value}%'
-        }
+    }
+  ],
+  series: [
+    {
+      name: '收入',
+      type: 'bar',
+      data: [7000, 7100, 7200, 7300, 7400],
+      barWidth: 20,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#83bff6' },
+          { offset: 0.5, color: '#188df0' },
+          { offset: 1, color: '#188df0' }
+        ])
       }
-    ],
-    series: [
-      {
-        name: '收入',
-        type: 'bar',
-        data: [7000, 7100, 7200, 7300, 7400],
-        barWidth: 20,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#83bff6' },
-            { offset: 0.5, color: '#188df0' },
-            { offset: 1, color: '#188df0' }
-          ])
-        }
-      },
-      {
-        name: '毛利润',
-        type: 'bar',
-        data: [8000, 8200, 8400, 8600, 8800],
-        barWidth: 20,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#25d73c' },
-            { offset: 0.5, color: '#1bc23d' },
-            { offset: 1, color: '#179e61' }
-          ])
-        }
-      },
-      {
-        name: '收入增长率',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [60, 65, 70, 75, 80],
-        itemStyle: {
-          color: '#67C23A'
-        }
-      },
-      {
-        name: '利润增长率',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [70, 75, 80, 85, 90],
-        itemStyle: {
-          color: '#409EFF'
-        }
+    },
+    {
+      name: '毛利润',
+      type: 'bar',
+      data: [8000, 8200, 8400, 8600, 8800],
+      barWidth: 20,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#25d73c' },
+          { offset: 0.5, color: '#1bc23d' },
+          { offset: 1, color: '#179e61' }
+        ])
       }
-    ]
-  } as EChartsOption);
-  chart.value = barChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+    },
+    {
+      name: '收入增长率',
+      type: 'line',
+      yAxisIndex: 1,
+      data: [60, 65, 70, 75, 80],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    },
+    {
+      name: '利润增长率',
+      type: 'line',
+      yAxisIndex: 1,
+      data: [70, 75, 80, 85, 90],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    }
+  ]
+};
 
 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,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>

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,71 +29,51 @@ 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({
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      top: 'bottom',
-      textStyle: {
-        color: '#999'
-      }
-    },
-    series: [
-      {
-        name: 'Nightingale Chart',
-        type: 'pie',
-        radius: [50, 130],
-        center: ['50%', '50%'],
-        roseType: 'area',
-        itemStyle: {
-          borderRadius: 1,
-          color: function (params: any) {
-            //自定义颜色
-            const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
-            return colorList[params.dataIndex];
-          }
-        },
-        data: [
-          { value: 26, name: '家用电器' },
-          { value: 27, name: '户外运动' },
-          { value: 24, name: '汽车用品' },
-          { value: 23, name: '手机数码' }
-        ]
-      }
-    ]
-  } as EChartsOption);
-
-  chart.value = pieChart;
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy();
-});
-
-onActivated(() => {
-  activated();
-});
-
-onDeactivated(() => {
-  deactivated();
-});
+const options = {
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    top: 'bottom',
+    textStyle: {
+      color: '#999'
+    }
+  },
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: [50, 130],
+      center: ['50%', '50%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 1,
+        color: function (params: any) {
+          //自定义颜色
+          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
+          return colorList[params.dataIndex];
+        }
+      },
+      data: [
+        { value: 26, name: '家用电器' },
+        { value: 27, name: '户外运动' },
+        { value: 24, name: '汽车用品' },
+        { value: 23, 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>

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>

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>