Skip to content

Commit c6de72b

Browse files
committed
fix: fix issue opencurve#3, redraw and center the two pie charts
1 parent bc8a81d commit c6de72b

File tree

2 files changed

+83
-56
lines changed

2 files changed

+83
-56
lines changed

src/charts/cluster-overview/ClusterSpaceChart.vue

Lines changed: 67 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
</template>
44

55
<script setup lang="ts">
6-
import * as echarts from "echarts";
7-
import { ref, watch, toRefs, reactive, onBeforeUnmount, onMounted } from 'vue'
6+
import * as echarts from 'echarts'
7+
import { onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue'
8+
89
import { useDashboardStore } from '@/store/clusterOverview/dashboard'
910
1011
const dashBoardStore = useDashboardStore()
@@ -15,95 +16,106 @@ const state = dashBoardStore.state
1516
1617
const main = ref<HTMLDivElement>() // 使用ref创建虚拟DOM引用,使用时用main.value
1718
18-
const myChart = ref(null);
19-
let clusterSpace = reactive({});
19+
const myChart = ref(null)
20+
let clusterSpace = reactive({})
2021
2122
const drawChart = () => {
2223
getClusterSpace().then(res => {
23-
clusterSpace = res.data.data;
24-
const alloc = res.data.data.alloc - res.data.data.canRecycled;
25-
const canRecycled = res.data.data.canRecycled;
26-
const unAlloc = res.data.data.total - res.data.data.alloc;
24+
clusterSpace = res.data.data
25+
const alloc = res.data.data.alloc - res.data.data.canRecycled
26+
const canRecycled = res.data.data.canRecycled
27+
const unAlloc = res.data.data.total - res.data.data.alloc
2728
// 指定图表的配置项和数据
2829
var data = [
2930
{ value: alloc, name: '已分配不可回收容量' },
3031
{ value: canRecycled, name: '已分配可回收容量' },
3132
{ value: unAlloc, name: '未分配容量' },
32-
];
33-
var total = data[0].value + data[2].value;
33+
]
34+
var total = data[0].value + data[2].value
3435
3536
var option = {
3637
tooltip: {
3738
show: true,
3839
formatter: function (params: any) {
39-
return params.name + ' : ' + params.value + 'GiB';
40-
}
40+
return params.name + ' : ' + params.value + 'GiB'
41+
},
4142
},
4243
title: {
43-
text: total + ' ' + "GiB",
44+
text: total + ' ' + 'GiB',
4445
subtext: '总量',
4546
x: 'center',
4647
y: 'center',
4748
textStyle: {
4849
color: '#000',
49-
fontSize: 24
50+
fontSize: 24,
5051
},
5152
subtextStyle: {
5253
color: '#aaa',
53-
fontSize: 16
54-
}
55-
},
56-
series: [{
57-
name: '集群容量',
58-
type: 'pie',
59-
radius: ['50%', '70%'],
60-
avoidLabelOverlap: false,
61-
label: {
62-
show: true,
63-
position: 'outside',
64-
formatter: '{c} GiB'
65-
66-
67-
// '{b}: {c}'
54+
fontSize: 16,
6855
},
69-
labelLine: {
70-
show: true,
71-
length: 3,
72-
// length2: 15
56+
},
57+
series: [
58+
{
59+
name: '集群容量',
60+
type: 'pie',
61+
radius: ['50%', '70%'],
62+
avoidLabelOverlap: false,
63+
label: {
64+
show: true,
65+
position: 'outside',
66+
formatter: '{c} GiB',
67+
68+
// '{b}: {c}'
69+
},
70+
labelLine: {
71+
show: true,
72+
length: 3,
73+
// length2: 15
74+
},
75+
data: data,
7376
},
74-
data: data
75-
}],
77+
],
7678
legend: {
77-
bottom: 10,
78-
left: 'center',
79-
data: ['已分配不可回收容量', '已分配可回收容量']
80-
},
81-
};
82-
myChart.value.setOption(option);
79+
bottom: 10,
80+
left: 'center',
81+
data: ['已分配不可回收容量', '已分配可回收容量'],
82+
},
83+
}
84+
myChart.value.setOption(option)
8385
})
8486
}
8587
8688
onMounted(() => {
87-
myChart.value = echarts.init(main.value);
88-
drawChart();
89+
myChart.value = echarts.init(main.value)
90+
drawChart()
91+
window.addEventListener('resize', () => {
92+
myChart.value?.resize()
93+
})
94+
})
95+
// 为免内存泄露
96+
onBeforeUnmount(() => {
97+
window.removeEventListener('resize', () => {
98+
myChart.value?.resize()
99+
})
89100
})
90101
let timer = setInterval(drawChart, 1800000)
91102
92-
watch(() => state.timeInterval, (newVal) => {
93-
if (newVal === 0) {
94-
clearInterval(timer)
95-
}
96-
else {
97-
clearInterval(timer);
98-
timer = setInterval(drawChart, newVal * 1000)
99-
}
100-
})
103+
watch(
104+
() => state.timeInterval,
105+
newVal => {
106+
if (newVal === 0) {
107+
clearInterval(timer)
108+
} else {
109+
clearInterval(timer)
110+
timer = setInterval(drawChart, newVal * 1000)
111+
}
112+
},
113+
)
101114
102115
onBeforeUnmount(() => {
103-
clearInterval(timer);
116+
clearInterval(timer)
104117
echarts.dispose(main.value)
105118
})
106119
107120
defineExpose({ drawChart })
108-
109-
</script>
121+
</script>

src/charts/cluster-overview/ClusterStatusChart.vue

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
2+
<button @click="Try">Button</button>
23
<div ref="main" style="width: 100%; height: 400px"></div>
34
</template>
45

56
<script setup lang="ts">
67
import type { ECharts } from 'echarts'
78
import * as echarts from 'echarts'
8-
import { onMounted, reactive, ref, watch } from 'vue'
9+
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
910
1011
import { getClusterStatusApi } from '@/api/dashboard'
1112
import { useDashboardStore } from '@/store/clusterOverview/dashboard'
@@ -27,6 +28,10 @@ const getClusterStatus = async () => {
2728
}
2829
}
2930
31+
const Try = () => {
32+
myChart.value?.resize()
33+
}
34+
3035
const drawChart = () => {
3136
getClusterStatus().then(res => {
3237
clusterStatus = res.data.data
@@ -95,7 +100,17 @@ const drawChart = () => {
95100
onMounted(() => {
96101
myChart.value = echarts.init(main.value!)
97102
drawChart()
103+
window.addEventListener('resize', () => {
104+
myChart.value?.resize()
105+
})
98106
})
107+
// 为免内存泄露
108+
onBeforeUnmount(() => {
109+
window.removeEventListener('resize', () => {
110+
myChart.value?.resize()
111+
})
112+
})
113+
99114
let timer = setInterval(drawChart, 1800000)
100115
101116
watch(

0 commit comments

Comments
 (0)