1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| <script lang="ts" setup>
| import type { EchartsUIType } from '@vben/plugins/echarts';
|
| import type { InfraRedisApi } from '#/api/infra/redis';
|
| import { onMounted, ref, watch } from 'vue';
|
| import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
| const props = defineProps<{
| redisData?: InfraRedisApi.RedisMonitorInfo;
| }>();
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| /** 解析内存值，移除单位，转为数字 */
| function parseMemoryValue(memStr: string | undefined): number {
| if (!memStr) {
| return 0;
| }
| try {
| // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
| const str = String(memStr); // 显式转换为字符串类型
| const match = str.match(/^([\d.]+)/);
| return match ? Number.parseFloat(match[1] as string) : 0;
| } catch {
| return 0;
| }
| }
|
| /** 渲染内存使用图表 */
| function renderMemoryChart() {
| if (!props.redisData?.info) {
| return;
| }
|
| // 处理数据
| const usedMemory = props.redisData.info.used_memory_human || '0';
| const memoryValue = parseMemoryValue(usedMemory);
|
| // 渲染图表
| renderEcharts({
| title: {
| text: '内存使用情况',
| left: 'center',
| },
| tooltip: {
| formatter: `{b} <br/>{a} : ${usedMemory}`,
| },
| series: [
| {
| name: '峰值',
| type: 'gauge',
| min: 0,
| max: 100,
| splitNumber: 10,
| color: '#F5C74E',
| radius: '85%',
| center: ['50%', '50%'],
| startAngle: 225,
| endAngle: -45,
| axisLine: {
| lineStyle: {
| color: [
| [0.2, '#7FFF00'],
| [0.8, '#00FFFF'],
| [1, '#FF0000'],
| ],
| width: 10,
| },
| },
| axisTick: {
| length: 5,
| lineStyle: {
| color: '#76D9D7',
| },
| },
| splitLine: {
| length: 20,
| lineStyle: {
| color: '#76D9D7',
| },
| },
| axisLabel: {
| color: '#76D9D7',
| distance: 15,
| fontSize: 15,
| },
| pointer: {
| width: 7,
| show: true,
| },
| detail: {
| show: true,
| offsetCenter: [0, '50%'],
| color: 'inherit',
| fontSize: 30,
| formatter: usedMemory,
| },
| progress: {
| show: true,
| },
| data: [
| {
| value: memoryValue,
| name: '内存消耗',
| },
| ],
| },
| ],
| });
| }
|
| /** 监听数据变化，重新渲染图表 */
| watch(
| () => props.redisData,
| (newVal) => {
| if (newVal) {
| renderMemoryChart();
| }
| },
| { deep: true },
| );
|
| onMounted(() => {
| if (props.redisData) {
| renderMemoryChart();
| }
| });
| </script>
|
| <template>
| <EchartsUI ref="chartRef" height="420px" />
| </template>
|
|
