refactor: 修改为setup形式

This commit is contained in:
dap 2025-03-23 13:30:40 +08:00
parent 731c9be4f1
commit ba6785931d
2 changed files with 122 additions and 142 deletions

View File

@ -1,46 +1,41 @@
<script lang="ts"> <script setup lang="ts">
import type { PropType } from 'vue';
import type { EchartsUIType } from '@vben/plugins/echarts'; import type { EchartsUIType } from '@vben/plugins/echarts';
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue'; import { onActivated, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts'; import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
export default defineComponent({ interface Props {
components: { EchartsUI }, data?: { name: string; value: string }[];
props: { }
data: {
default: () => [],
type: Array as PropType<{ name: string; value: string }[]>,
},
},
setup(props, { expose }) {
expose({});
const chartRef = ref<EchartsUIType>(); const props = withDefaults(defineProps<Props>(), {
const { renderEcharts, resize } = useEcharts(chartRef); data: () => [],
});
watch( const chartRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(chartRef);
watch(
() => props.data, () => props.data,
() => { () => {
if (!chartRef.value) return; if (!chartRef.value) return;
setEchartsOption(props.data); setEchartsOption(props.data);
}, },
{ immediate: true }, { immediate: true },
); );
onMounted(() => { onMounted(() => {
setEchartsOption(props.data); setEchartsOption(props.data);
}); });
/** /**
* 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
* 该饼图组件需要关闭animation * 该饼图组件需要关闭animation
*/ */
onActivated(() => resize(false)); onActivated(() => resize(false));
type EChartsOption = Parameters<typeof renderEcharts>['0']; type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(data: any[]) { function setEchartsOption(data: any[]) {
const option: EChartsOption = { const option: EChartsOption = {
series: [ series: [
{ {
@ -60,13 +55,7 @@ export default defineComponent({
}, },
}; };
renderEcharts(option); renderEcharts(option);
} }
return {
chartRef,
};
},
});
</script> </script>
<template> <template>

View File

@ -1,56 +1,53 @@
<script lang="ts"> <script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts'; import type { EchartsUIType } from '@vben/plugins/echarts';
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue'; import { onActivated, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts'; import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
export default defineComponent({ interface Props {
components: { EchartsUI }, data?: string;
props: { }
data: {
default: '0',
type: String,
},
},
setup(props, { expose }) {
expose({});
const memoryHtmlRef = ref<EchartsUIType>(); const props = withDefaults(defineProps<Props>(), {
const { renderEcharts, resize } = useEcharts(memoryHtmlRef); data: '0',
});
watch( const memoryHtmlRef = ref<EchartsUIType>();
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
watch(
() => props.data, () => props.data,
() => { () => {
if (!memoryHtmlRef.value) return; if (!memoryHtmlRef.value) return;
setEchartsOption(props.data); setEchartsOption(props.data);
}, },
{ immediate: true }, { immediate: true },
); );
onMounted(() => { onMounted(() => {
setEchartsOption(props.data); setEchartsOption(props.data);
}); });
// resize // resize
onActivated(resize); onActivated(resize);
/** /**
* 获取最近的十的幂次 * 获取最近的十的幂次
* 该函数用于寻找大于给定数字num的最近的10的幂次 * 该函数用于寻找大于给定数字num的最近的10的幂次
* 主要解决的问题是确定一个数附近较大的十的幂次这在某些算法中很有用 * 主要解决的问题是确定一个数附近较大的十的幂次这在某些算法中很有用
* *
* @param num {number} 输入的数字用于寻找最近的十的幂次 * @param num {number} 输入的数字用于寻找最近的十的幂次
*/ */
function getNearestPowerOfTen(num: number) { function getNearestPowerOfTen(num: number) {
let power = 10; let power = 10;
while (power <= num) { while (power <= num) {
power *= 10; power *= 10;
} }
return power; return power;
} }
type EChartsOption = Parameters<typeof renderEcharts>['0']; type EChartsOption = Parameters<typeof renderEcharts>['0'];
function setEchartsOption(value: string) { function setEchartsOption(value: string) {
// x10 // x10
const formattedValue = Math.floor(Number.parseFloat(value)); const formattedValue = Math.floor(Number.parseFloat(value));
// 1010 100100 // 1010 100100
@ -84,13 +81,7 @@ export default defineComponent({
}, },
}; };
renderEcharts(options); renderEcharts(options);
} }
return {
memoryHtmlRef,
};
},
});
</script> </script>
<template> <template>