refactor: 使用useEcharts重构缓存监控
This commit is contained in:
parent
14a5201bc7
commit
158aa5fc1b
@ -1,13 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { EChartsOption } from 'echarts';
|
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 { preferences } from '@vben/preferences';
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: { EchartsUI },
|
||||||
name: 'CommandChart',
|
name: 'CommandChart',
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
@ -18,31 +18,25 @@ export default defineComponent({
|
|||||||
setup(props, { expose }) {
|
setup(props, { expose }) {
|
||||||
expose({});
|
expose({});
|
||||||
|
|
||||||
const commandHtmlRef = ref<HTMLDivElement>();
|
const chartRef = ref<EchartsUIType>();
|
||||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
const { renderEcharts } = useEcharts(chartRef);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
() => {
|
() => {
|
||||||
if (!commandHtmlRef.value) return;
|
if (!chartRef.value) return;
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true },
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
echartsInstance.value = echarts.init(
|
|
||||||
commandHtmlRef.value,
|
|
||||||
preferences.theme.mode,
|
|
||||||
);
|
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => preferences.theme.mode,
|
() => preferences.theme.mode,
|
||||||
(mode) => {
|
() => {
|
||||||
echartsInstance.value?.dispose();
|
|
||||||
echartsInstance.value = echarts.init(commandHtmlRef.value, mode);
|
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@ -53,7 +47,7 @@ export default defineComponent({
|
|||||||
{
|
{
|
||||||
animationDuration: 1000,
|
animationDuration: 1000,
|
||||||
animationEasing: 'cubicInOut',
|
animationEasing: 'cubicInOut',
|
||||||
center: ['50%', '38%'],
|
center: ['50%', '50%'],
|
||||||
data,
|
data,
|
||||||
name: '命令',
|
name: '命令',
|
||||||
radius: [15, 95],
|
radius: [15, 95],
|
||||||
@ -66,18 +60,20 @@ export default defineComponent({
|
|||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
echartsInstance.value?.setOption(option);
|
renderEcharts(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
commandHtmlRef,
|
chartRef,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { EChartsOption } from 'echarts';
|
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 { preferences } from '@vben/preferences';
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: { EchartsUI },
|
||||||
name: 'MemoryChart',
|
name: 'MemoryChart',
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
@ -18,8 +18,8 @@ export default defineComponent({
|
|||||||
setup(props, { expose }) {
|
setup(props, { expose }) {
|
||||||
expose({});
|
expose({});
|
||||||
|
|
||||||
const memoryHtmlRef = ref<HTMLDivElement>();
|
const memoryHtmlRef = ref<EchartsUIType>();
|
||||||
const echartsInstance = shallowRef<echarts.ECharts | null>(null);
|
const { renderEcharts } = useEcharts(memoryHtmlRef);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
@ -31,18 +31,12 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
echartsInstance.value = echarts.init(
|
|
||||||
memoryHtmlRef.value,
|
|
||||||
preferences.theme.mode,
|
|
||||||
);
|
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => preferences.theme.mode,
|
() => preferences.theme.mode,
|
||||||
(mode) => {
|
() => {
|
||||||
echartsInstance.value?.dispose();
|
|
||||||
echartsInstance.value = echarts.init(memoryHtmlRef.value, mode);
|
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@ -85,7 +79,7 @@ export default defineComponent({
|
|||||||
formatter: `{b} <br/>{a} : ${value}M`,
|
formatter: `{b} <br/>{a} : ${value}M`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
echartsInstance.value?.setOption(options);
|
renderEcharts(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -96,7 +90,9 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
@ -12,7 +12,13 @@ import type {
|
|||||||
} from 'echarts/components';
|
} from 'echarts/components';
|
||||||
import type { ComposeOption } from 'echarts/core';
|
import type { ComposeOption } from 'echarts/core';
|
||||||
|
|
||||||
import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
|
import {
|
||||||
|
BarChart,
|
||||||
|
GaugeChart,
|
||||||
|
LineChart,
|
||||||
|
PieChart,
|
||||||
|
RadarChart,
|
||||||
|
} from 'echarts/charts';
|
||||||
import {
|
import {
|
||||||
// 数据集组件
|
// 数据集组件
|
||||||
DatasetComponent,
|
DatasetComponent,
|
||||||
@ -54,6 +60,7 @@ echarts.use([
|
|||||||
CanvasRenderer,
|
CanvasRenderer,
|
||||||
LegendComponent,
|
LegendComponent,
|
||||||
ToolboxComponent,
|
ToolboxComponent,
|
||||||
|
GaugeChart,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export default echarts;
|
export default echarts;
|
||||||
|
Loading…
Reference in New Issue
Block a user