fix 修复 缓存监控图表 支持跟随屏幕大小自适应调整

This commit is contained in:
疯狂的狮子Li 2023-07-04 15:50:36 +08:00
parent cc69786fd1
commit d930b15104

View File

@ -134,56 +134,59 @@ const usedmemory = ref();
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const getList = async () => { const getList = async () => {
proxy?.$modal.loading("正在加载缓存监控数据,请稍候!"); proxy?.$modal.loading("正在加载缓存监控数据,请稍候!");
const res = await getCache(); const res = await getCache();
proxy?.$modal.closeLoading(); proxy?.$modal.closeLoading();
cache.value = res.data; cache.value = res.data;
const commandstatsIntance = echarts.init(commandstats.value, "macarons"); const commandstatsIntance = echarts.init(commandstats.value, "macarons");
commandstatsIntance.setOption({ commandstatsIntance.setOption({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)" formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: "命令",
type: "pie",
roseType: "radius",
radius: [15, 95],
center: ["50%", "38%"],
data: res.data.commandStats,
animationEasing: "cubicInOut",
animationDuration: 1000
}
]
});
const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
usedmemoryInstance.setOption({
tooltip: {
formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
},
series: [
{
name: "峰值",
type: "gauge",
min: 0,
max: 1000,
detail: {
formatter: cache.value.info.used_memory_human
}, },
series: [ data: [
{ {
name: "命令", value: parseFloat(cache.value.info.used_memory_human),
type: "pie", name: "内存消耗"
roseType: "radius", }
radius: [15, 95],
center: ["50%", "38%"],
data: res.data.commandStats,
animationEasing: "cubicInOut",
animationDuration: 1000
}
] ]
}); }
]
const usedmemoryInstance = echarts.init(usedmemory.value, "macarons"); })
usedmemoryInstance.setOption({ window.addEventListener("resize",()=>{
tooltip: { commandstatsIntance.resize()
formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human usedmemoryInstance.resize()
}, });
series: [
{
name: "峰值",
type: "gauge",
min: 0,
max: 1000,
detail: {
formatter: cache.value.info.used_memory_human
},
data: [
{
value: parseFloat(cache.value.info.used_memory_human),
name: "内存消耗"
}
]
}
]
})
} }
onMounted(() => { onMounted(() => {
getList(); getList();
}) })
</script> </script>