fix: fix issue #3, redraw and center the two pie charts

opencurve · Dec 8, 2023 · d40a8de · d40a8de
1 parent bc8a81d
commit d40a8de
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 56 deletions.
diff --git a/src/charts/cluster-overview/ClusterSpaceChart.vue b/src/charts/cluster-overview/ClusterSpaceChart.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, watch, toRefs, reactive, onBeforeUnmount, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import { onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
+
 import { useDashboardStore } from '@/store/clusterOverview/dashboard'
 
 const dashBoardStore = useDashboardStore()
@@ -15,95 +16,106 @@ const state = dashBoardStore.state
 
 const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用，使用时用main.value
 
-const myChart = ref(null);
-let clusterSpace = reactive({});
+const myChart = ref(null)
+let clusterSpace = reactive({})
 
 const drawChart = () => {
   getClusterSpace().then(res => {
-    clusterSpace = res.data.data;
-    const alloc = res.data.data.alloc - res.data.data.canRecycled;
-    const canRecycled = res.data.data.canRecycled;
-    const unAlloc = res.data.data.total - res.data.data.alloc;
+    clusterSpace = res.data.data
+    const alloc = res.data.data.alloc - res.data.data.canRecycled
+    const canRecycled = res.data.data.canRecycled
+    const unAlloc = res.data.data.total - res.data.data.alloc
     // 指定图表的配置项和数据
     var data = [
       { value: alloc, name: '已分配不可回收容量' },
       { value: canRecycled, name: '已分配可回收容量' },
       { value: unAlloc, name: '未分配容量' },
-    ];
-    var total = data[0].value + data[2].value;
+    ]
+    var total = data[0].value + data[2].value
 
     var option = {
       tooltip: {
         show: true,
         formatter: function (params: any) {
-          return params.name + ' : ' + params.value + 'GiB';
-        }
+          return params.name + ' : ' + params.value + 'GiB'
+        },
       },
       title: {
-        text: total + ' ' + "GiB",
+        text: total + ' ' + 'GiB',
         subtext: '总量',
         x: 'center',
         y: 'center',
         textStyle: {
           color: '#000',
-          fontSize: 24
+          fontSize: 24,
         },
         subtextStyle: {
           color: '#aaa',
-          fontSize: 16
-        }
-      },
-      series: [{
-        name: '集群容量',
-        type: 'pie',
-        radius: ['50%', '70%'],
-        avoidLabelOverlap: false,
-        label: {
-          show: true,
-          position: 'outside',
-          formatter: '{c} GiB'
-          
-          
-          // '{b}: {c}'
+          fontSize: 16,
         },
-        labelLine: {
-          show: true,
-          length: 3,
-          // length2: 15
+      },
+      series: [
+        {
+          name: '集群容量',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: '{c} GiB',
+
+            // '{b}: {c}'
+          },
+          labelLine: {
+            show: true,
+            length: 3,
+            // length2: 15
+          },
+          data: data,
         },
-        data: data
-      }],
+      ],
       legend: {
-    bottom: 10,
-    left: 'center',
-    data: ['已分配不可回收容量', '已分配可回收容量']
-  },
-    };
-    myChart.value.setOption(option);
+        bottom: 10,
+        left: 'center',
+        data: ['已分配不可回收容量', '已分配可回收容量'],
+      },
+    }
+    myChart.value.setOption(option)
   })
 }
 
 onMounted(() => {
-   myChart.value = echarts.init(main.value); 
-  drawChart();
+  myChart.value = echarts.init(main.value)
+  drawChart()
+  window.addEventListener('resize', () => {
+    myChart.value?.resize()
+  })
+})
+// 为免内存泄露
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', () => {
+    myChart.value?.resize()
+  })
 })
 let timer = setInterval(drawChart, 1800000)
 
-watch(() => state.timeInterval, (newVal) => {
-  if (newVal === 0) {
-    clearInterval(timer)
-  }
-  else {
-   clearInterval(timer);
-   timer = setInterval(drawChart, newVal * 1000)
-  }
-})
+watch(
+  () => state.timeInterval,
+  newVal => {
+    if (newVal === 0) {
+      clearInterval(timer)
+    } else {
+      clearInterval(timer)
+      timer = setInterval(drawChart, newVal * 1000)
+    }
+  },
+)
 
 onBeforeUnmount(() => {
-  clearInterval(timer);
+  clearInterval(timer)
   echarts.dispose(main.value)
 })
 
 defineExpose({ drawChart })
-
-</script>
+</script>
diff --git a/src/charts/cluster-overview/ClusterStatusChart.vue b/src/charts/cluster-overview/ClusterStatusChart.vue
@@ -1,11 +1,12 @@
 <template>
+  <button @click="Try">Button</button>
   <div ref="main" style="width: 100%; height: 400px"></div>
 </template>
 
 <script setup lang="ts">
 import type { ECharts } from 'echarts'
 import * as echarts from 'echarts'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
 import { getClusterStatusApi } from '@/api/dashboard'
 import { useDashboardStore } from '@/store/clusterOverview/dashboard'
@@ -27,6 +28,10 @@ const getClusterStatus = async () => {
   }
 }
 
+const Try = () => {
+  myChart.value?.resize()
+}
+
 const drawChart = () => {
   getClusterStatus().then(res => {
     clusterStatus = res.data.data
@@ -95,7 +100,17 @@ const drawChart = () => {
 onMounted(() => {
   myChart.value = echarts.init(main.value!)
   drawChart()
+  window.addEventListener('resize', () => {
+    myChart.value?.resize()
+  })
 })
+// 为免内存泄露
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', () => {
+    myChart.value?.resize()
+  })
+})
+
 let timer = setInterval(drawChart, 1800000)
 
 watch(