3
3
</template >
4
4
5
5
<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
+
8
9
import { useDashboardStore } from ' @/store/clusterOverview/dashboard'
9
10
10
11
const dashBoardStore = useDashboardStore ()
@@ -15,95 +16,106 @@ const state = dashBoardStore.state
15
16
16
17
const main = ref <HTMLDivElement >() // 使用ref创建虚拟DOM引用,使用时用main.value
17
18
18
- const myChart = ref (null );
19
- let clusterSpace = reactive ({});
19
+ const myChart = ref (null )
20
+ let clusterSpace = reactive ({})
20
21
21
22
const drawChart = () => {
22
23
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
27
28
// 指定图表的配置项和数据
28
29
var data = [
29
30
{ value: alloc , name: ' 已分配不可回收容量' },
30
31
{ value: canRecycled , name: ' 已分配可回收容量' },
31
32
{ value: unAlloc , name: ' 未分配容量' },
32
- ];
33
- var total = data [0 ].value + data [2 ].value ;
33
+ ]
34
+ var total = data [0 ].value + data [2 ].value
34
35
35
36
var option = {
36
37
tooltip: {
37
38
show: true ,
38
39
formatter : function (params : any ) {
39
- return params .name + ' : ' + params .value + ' GiB' ;
40
- }
40
+ return params .name + ' : ' + params .value + ' GiB'
41
+ },
41
42
},
42
43
title: {
43
- text: total + ' ' + " GiB" ,
44
+ text: total + ' ' + ' GiB' ,
44
45
subtext: ' 总量' ,
45
46
x: ' center' ,
46
47
y: ' center' ,
47
48
textStyle: {
48
49
color: ' #000' ,
49
- fontSize: 24
50
+ fontSize: 24 ,
50
51
},
51
52
subtextStyle: {
52
53
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 ,
68
55
},
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 ,
73
76
},
74
- data: data
75
- }],
77
+ ],
76
78
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 )
83
85
})
84
86
}
85
87
86
88
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
+ })
89
100
})
90
101
let timer = setInterval (drawChart , 1800000 )
91
102
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
+ )
101
114
102
115
onBeforeUnmount (() => {
103
- clearInterval (timer );
116
+ clearInterval (timer )
104
117
echarts .dispose (main .value )
105
118
})
106
119
107
120
defineExpose ({ drawChart })
108
-
109
- </script >
121
+ </script >
0 commit comments