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
| <script lang="ts" setup>
| import type { EchartsUIType } from '../../../../packages/effects/plugins/src/echarts';
|
| import type { InfraRedisApi } from '#/api/infra/redis';
|
| import { onMounted, ref, watch } from 'vue';
|
| import { EchartsUI, useEcharts } from '../../../../packages/effects/plugins/src/echarts';
|
| const props = defineProps<{
| redisData?: InfraRedisApi.RedisMonitorInfo;
| }>();
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| /** 渲染命令统计图表 */
| function renderCommandStats() {
| if (!props.redisData?.commandStats) {
| return;
| }
|
| // 处理数据
| const commandStats = [] as any[];
| const nameList = [] as string[];
| props.redisData.commandStats.forEach((row) => {
| commandStats.push({
| name: row.command,
| value: row.calls,
| });
| nameList.push(row.command);
| });
|
| // 渲染图表
| renderEcharts({
| title: {
| text: '命令统计',
| left: 'center',
| },
| tooltip: {
| trigger: 'item',
| formatter: '{a} <br/>{b} : {c} ({d}%)',
| },
| legend: {
| type: 'scroll',
| orient: 'vertical',
| right: 30,
| top: 10,
| bottom: 20,
| data: nameList,
| textStyle: {
| color: '#a1a1a1',
| },
| },
| series: [
| {
| name: '命令',
| type: 'pie',
| radius: [20, 120],
| center: ['40%', '60%'],
| data: commandStats,
| roseType: 'radius',
| label: {
| show: true,
| },
| emphasis: {
| label: {
| show: true,
| },
| itemStyle: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgba(0, 0, 0, 0.5)',
| },
| },
| },
| ],
| });
| }
|
| /** 监听数据变化，重新渲染图表 */
| watch(
| () => props.redisData,
| (newVal) => {
| if (newVal) {
| renderCommandStats();
| }
| },
| { deep: true },
| );
|
| onMounted(() => {
| if (props.redisData) {
| renderCommandStats();
| }
| });
| </script>
|
| <template>
| <EchartsUI ref="chartRef" height="420px" />
| </template>
|
|
