Redis监控图标使用Echart组件整合

This commit is contained in:
Chika 2023-05-12 15:30:01 +08:00
parent 7e3f6190a5
commit bf629a9554
2 changed files with 209 additions and 92 deletions

View File

@ -318,6 +318,28 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
]
},
{
path: '/infra',
component: Layout,
name: 'InfraRedis',
meta: {
hidden: true
},
children: [
{
path: '/infra/redis',
component: () => import('@/views/infra/redis/index.vue'),
name: 'InfraRedis',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: 'REDIS测试测试测试',
activeMenu: 'infra/redis/index'
}
}
]
},
{
path: '/property',
component: Layout,

View File

@ -1,7 +1,6 @@
<template>
<doc-alert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
<doc-alert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row>
<!-- 基本信息 -->
@ -51,126 +50,222 @@
<!-- 命令统计 -->
<el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover">
<div ref="commandStatsRef" class="h-88"></div>
<Echart :options="commandStatsRefChika" :height="420" />
</el-card>
</el-col>
<!-- 内存使用量统计 -->
<el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover">
<div ref="usedmemory" class="h-88"></div>
<Echart :options="usedmemoryEchartChika" :height="420" />
</el-card>
</el-col>
</el-row>
</el-scrollbar>
</template>
<script setup lang="ts" name="InfraRedis">
import * as echarts from 'echarts'
<script setup lang="ts">
import echarts from '@/plugins/echarts'
import { GaugeChart } from 'echarts/charts'
import { ToolboxComponent } from 'echarts/components'
import * as RedisApi from '@/api/infra/redis'
import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
echarts.use([ToolboxComponent])
echarts.use([GaugeChart])
const cache = ref<RedisMonitorInfoVO>()
//
const readRedisInfo = async () => {
const data = await RedisApi.getCache()
cache.value = data
loadEchartOptions(data.commandStats)
}
//
const commandStatsRef = ref<HTMLElement>()
const usedmemory = ref<HTMLDivElement>()
const loadEchartOptions = (stats) => {
const commandStats = [] as any[]
const nameList = [] as string[]
stats.forEach((row) => {
commandStats.push({
name: row.command,
value: row.calls
})
nameList.push(row.command)
})
const commandStatsInstance = echarts.init(commandStatsRef.value!, 'macarons')
commandStatsInstance.setOption({
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'
// 使
const usedmemoryEchartChika = reactive({
title: {
//
text: '内存使用情况',
left: 'center',
show: true, // , true
offsetCenter: [0, '20%'], //
color: 'yellow', // , #333
fontSize: 20 // , 15
},
toolbox: {
show: false,
feature: {
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '峰值',
type: 'gauge',
min: 0,
max: 50,
splitNumber: 10,
//
color: '#F5C74E',
radius: '85%',
center: ['50%', '50%'],
startAngle: 225,
endAngle: -45,
axisLine: {
// 线
lineStyle: {
// lineStyle线
color: [
[0.2, '#7FFF00'],
[0.8, '#00FFFF'],
[1, '#FF0000']
],
//width: 6
width: 10
}
},
axisTick: {
//
//线5线
length: 5, // length线
lineStyle: {
// lineStyle线
color: '#76D9D7'
}
},
splitLine: {
// 线
length: 20, // length线
lineStyle: {
// lineStylelineStyle线
color: '#76D9D7'
}
},
axisLabel: {
color: '#76D9D7',
distance: 15,
fontSize: 15
},
pointer: {
//
width: 7,
show: true
},
detail: {
textStyle: {
fontWeight: 'normal',
//50
fontSize: 15,
color: '#FFFFFF'
},
valueAnimation: true
},
progress: {
show: true
}
},
series: [
{
name: '命令',
type: 'pie',
radius: [20, 120],
center: ['40%', '60%'],
data: commandStats,
roseType: 'radius',
}
]
})
// 使
const commandStatsRefChika = reactive({
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: [] as any[],
textStyle: {
color: '#a1a1a1'
}
},
series: [
{
name: '命令',
type: 'pie',
radius: [20, 120],
center: ['40%', '60%'],
data: [] as any[],
roseType: 'radius',
label: {
show: true
},
emphasis: {
label: {
show: true
},
emphasis: {
label: {
show: true
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
]
})
}
]
})
const usedMemoryInstance = echarts.init(usedmemory.value!, 'macarons')
usedMemoryInstance.setOption({
title: {
text: '内存使用情况',
left: 'center'
},
tooltip: {
formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
},
series: [
{
name: '峰值',
type: 'gauge',
min: 0,
max: 100,
progress: {
show: true
},
detail: {
formatter: cache.value!.info.used_memory_human
},
data: [
{
value: parseFloat(cache.value!.info.used_memory_human),
name: '内存消耗'
}
]
}
]
})
/** 加载数据 */
const getSummary = () => {
//
initcommandStatsChart()
usedMemoryInstance()
}
onBeforeMount(() => {
/** 命令使用情况 */
const initcommandStatsChart = async () => {
usedmemoryEchartChika.series[0].data = []
//
try {
const data = await RedisApi.getCache()
cache.value = data
//
const commandStats = [] as any[]
const nameList = [] as string[]
data.commandStats.forEach((row) => {
commandStats.push({
name: row.command,
value: row.calls
})
nameList.push(row.command)
})
commandStatsRefChika.legend.data = nameList
commandStatsRefChika.series[0].data = commandStats
} catch {}
}
const usedMemoryInstance = async () => {
try {
const data = await RedisApi.getCache()
cache.value = data
//
usedmemoryEchartChika.series[0].detail = {
show: true, // , true
offsetCenter: [0, '50%'], //
color: 'auto', // , auto
fontSize: 30, // , 15
formatter: cache.value!.info.used_memory_human //
}
usedmemoryEchartChika.series[0].data[0] = {
value: cache.value!.info.used_memory_human,
name: '内存消耗'
}
usedmemoryEchartChika.tooltip = {
formatter: '{b} <br/>{a} : ' + cache.value!.info.used_memory_human
}
} catch {}
}
/** 初始化 **/
onMounted(() => {
readRedisInfo()
//
getSummary()
})
</script>