This commit is contained in:
dap 2024-08-07 16:38:44 +08:00
commit 9fcba07d62
3 changed files with 31 additions and 32 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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;