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

src/utils/resize.ts

+
+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)
+    }
+
+    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)
+        }
+    }
+
+    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

@@ -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,6 +33,14 @@ const props = defineProps({
   }
 })
 
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
+
 function initChart() {
   const barChart = init(document.getElementById(props.id) as HTMLDivElement)
 
@@ -45,7 +54,7 @@ function initChart() {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color:'#096b92'
+        color: '#096b92'
       }
     },
     grid: {
@@ -71,7 +80,7 @@ function initChart() {
     xAxis: [
       {
         type: 'category',
-        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东','海外'],
+        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东', '海外'],
         axisPointer: {
           type: 'shadow'
         }
@@ -104,22 +113,22 @@ function initChart() {
         data: [
           8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213
         ],
-        barWidth : 20
+        barWidth: 20
 
       },
       {
         name: '毛利润',
         type: 'bar',
         data: [
-           6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000,8200, 7000
+          6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000, 8200, 7000
         ],
-        barWidth : 20
+        barWidth: 20
       },
       {
         name: '收入增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42,46]
+        data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42, 46]
       },
       {
         name: '利润增长率',
@@ -128,14 +137,29 @@ function initChart() {
         data: [82, 81, 56, 45, 51, 65, 65, 67, 78, 76, 67, 78]
       }
     ]
-  })
+  } as EChartsOption)
+  chart.value = barChart
 }
 
+onBeforeUnmount(() => {
+  beforeDestroy()
+})
+
+onActivated(() => {
+  activated()
+})
+
+onDeactivated(() => {
+  deactivated()
+})
+
 onMounted(() => {
+  mounted()
   nextTick(() => {
     initChart()
   })
 })
+
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/components/FunnelChart.vue

@@ -8,8 +8,10 @@
 </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'
+import {FunnelChart} from "echarts/charts";
 
 const props = defineProps({
   id: {
@@ -32,10 +34,18 @@ const props = defineProps({
   }
 })
 
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
+
 function initChart() {
-  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+  const funnelChart = init(document.getElementById(props.id) as HTMLDivElement)
 
-  pieChart.setOption({
+  funnelChart.setOption({
     title: {
       show: true,
       text: '订单线索转化漏斗图',
@@ -103,14 +113,29 @@ function initChart() {
         ]
       }
     ]
-  })
+  } as EChartsOption)
+  chart.value = funnelChart
 }
 
+onBeforeUnmount(() => {
+  beforeDestroy()
+})
+
+onActivated(() => {
+  activated()
+})
+
+onDeactivated(() => {
+  deactivated()
+})
+
 onMounted(() => {
+  mounted()
   nextTick(() => {
     initChart()
   })
 })
+
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/components/PieChart.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,6 +33,14 @@ const props = defineProps({
   }
 })
 
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
+
 function initChart() {
   const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
 
@@ -61,7 +70,7 @@ function initChart() {
       {
         name: 'Nightingale Chart',
         type: 'pie',
-        radius: [50, 180],
+        radius: [50, 160],
         center: ['50%', '50%'],
         roseType: 'area',
         itemStyle: {
@@ -74,15 +83,29 @@ function initChart() {
           { value: 30, name: 'rose 4' },
           { value: 28, name: 'rose 5' },
           { value: 26, name: 'rose 6' },
-          { value: 22, name: 'rose 7' },
-          { value: 18, name: 'rose 8' }
+          { value: 22, name: 'rose 7' }
         ]
       }
     ]
-  })
+  } as EChartsOption)
+
+  chart.value = pieChart
 }
 
+onBeforeUnmount(() => {
+  beforeDestroy()
+})
+
+onActivated(() => {
+  activated()
+})
+
+onDeactivated(() => {
+  deactivated()
+})
+
 onMounted(() => {
+  mounted()
   nextTick(() => {
     initChart()
   })

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({
   }
 })
 
+const {
+  mounted,
+  chart,
+  beforeDestroy,
+  activated,
+  deactivated
+} = resize()
+
 function initChart() {
-  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+  const radarChart = init(document.getElementById(props.id) as HTMLDivElement)
 
-  pieChart.setOption({
+  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()
   })

src/views/dashboard/index.vue

@@ -62,19 +62,19 @@
       </el-col>
     </el-row>
 
-    <BarChart id="barChart" height="400px" width="100%" class="bar-chart-container"/>
+    <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
 
     <el-row :gutter="40" style="margin-top: 20px">
       <el-col :xs="24" :span="8">
-        <PieChart id="pieChart" height="500px" width="100%" class="pie-chart-container"/>
+        <PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
 
       <el-col :xs="24" :span="8">
-        <FunnelChart id="funnelChart" height="500px" width="100%" class="pie-chart-container"/>
+        <FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
 
       <el-col :xs="24" :span="8">
-        <RadarChart id="radarChart" height="500px" width="100%" class="pie-chart-container"/>
+        <RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
     </el-row>
 
@@ -82,10 +82,13 @@
 </template>
 
 <script setup lang="ts">
-import GithubCorner from '@/components/GithubCorner/index.vue'
-import TodoList from './components/TodoList/index.vue'
+
+// Vue引用
 import {computed, reactive, toRefs} from "vue";
 
+// 组件引用
+import GithubCorner from '@/components/GithubCorner/index.vue'
+import TodoList from './components/TodoList/index.vue'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import BarChart from "./components/BarChart.vue";
 import PieChart from "./components/PieChart.vue";
@@ -241,8 +244,7 @@ const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(stat
     .card-panel-description {
       float: right;
       font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
+      margin: 26px 20px 0;
 
       .card-panel-text {
         line-height: 18px;
@@ -257,13 +259,10 @@ const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(stat
     }
   }
 
-  .bar-chart-container {
+  .chart-container {
     background: #ffffff;
   }
 
-  .pie-chart-container {
-    background: #ffffff;
-  }
 }
 
 </style>