refactor: 使用useEcharts重构缓存监控

This commit is contained in:
孟彦祖 2024-08-07 16:25:38 +08:00
parent 14a5201bc7
commit 158aa5fc1b
3 changed files with 31 additions and 32 deletions

View File

@ -1,13 +1,13 @@
<script lang="ts">
import type { EChartsOption } from 'echarts';
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
import { preferences } from '@vben/preferences';
import * as echarts from 'echarts';
export default defineComponent({
components: { EchartsUI },
name: 'CommandChart',
props: {
data: {
@ -18,31 +18,25 @@ export default defineComponent({
setup(props, { expose }) {
expose({});
const commandHtmlRef = ref<HTMLDivElement>();
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
watch(
() => props.data,
() => {
if (!commandHtmlRef.value) return;
if (!chartRef.value) return;
setEchartsOption(props.data);
},
{ immediate: true },
);
onMounted(() => {
echartsInstance.value = echarts.init(
commandHtmlRef.value,
preferences.theme.mode,
);
setEchartsOption(props.data);
});
watch(
() => preferences.theme.mode,
(mode) => {
echartsInstance.value?.dispose();
echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
() => {
setEchartsOption(props.data);
},
);
@ -53,7 +47,7 @@ export default defineComponent({
{
animationDuration: 1000,
animationEasing: 'cubicInOut',
center: ['50%', '38%'],
center: ['50%', '50%'],
data,
name: '命令',
radius: [15, 95],
@ -66,18 +60,20 @@ export default defineComponent({
trigger: 'item',
},
};
echartsInstance.value?.setOption(option);
renderEcharts(option);
}
return {
commandHtmlRef,
chartRef,
};
},
});
</script>
<template>
<div ref="commandHtmlRef" class="h-[400px] w-full"></div>
<div class="flex h-[400px] w-full items-center justify-center">
<EchartsUI ref="chartRef" />
</div>
</template>
<style scoped></style>

View File

@ -1,13 +1,13 @@
<script lang="ts">
import type { EChartsOption } from 'echarts';
import { defineComponent, onMounted, ref, shallowRef, watch } from 'vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
import { preferences } from '@vben/preferences';
import * as echarts from 'echarts';
export default defineComponent({
components: { EchartsUI },
name: 'MemoryChart',
props: {
data: {
@ -18,8 +18,8 @@ export default defineComponent({
setup(props, { expose }) {
expose({});
const memoryHtmlRef = ref<HTMLDivElement>();
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
const memoryHtmlRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(memoryHtmlRef);
watch(
() => props.data,
@ -31,18 +31,12 @@ export default defineComponent({
);
onMounted(() => {
echartsInstance.value = echarts.init(
memoryHtmlRef.value,
preferences.theme.mode,
);
setEchartsOption(props.data);
});
watch(
() => preferences.theme.mode,
(mode) => {
echartsInstance.value?.dispose();
echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
() => {
setEchartsOption(props.data);
},
);
@ -85,7 +79,7 @@ export default defineComponent({
formatter: `{b} <br/>{a} : ${value}M`,
},
};
echartsInstance.value?.setOption(options);
renderEcharts(options);
}
return {
@ -96,7 +90,9 @@ export default defineComponent({
</script>
<template>
<div ref="memoryHtmlRef" class="h-[400px] w-full"></div>
<div class="flex h-[400px] w-full items-center justify-center">
<EchartsUI ref="memoryHtmlRef" />
</div>
</template>
<style scoped></style>

View File

@ -12,7 +12,13 @@ import type {
} from 'echarts/components';
import type { ComposeOption } from 'echarts/core';
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
import {
BarChart,
GaugeChart,
LineChart,
PieChart,
RadarChart,
} from 'echarts/charts';
import {
// 数据集组件
DatasetComponent,
@ -54,6 +60,7 @@ echarts.use([
CanvasRenderer,
LegendComponent,
ToolboxComponent,
GaugeChart,
]);
export default echarts;