refactor: 修改为setup形式
This commit is contained in:
parent
731c9be4f1
commit
ba6785931d
@ -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>
|
||||||
|
@ -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));
|
||||||
// 最大值 10以内取10 100以内取100 以此类推
|
// 最大值 10以内取10 100以内取100 以此类推
|
||||||
@ -84,13 +81,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
renderEcharts(options);
|
renderEcharts(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
|
||||||
memoryHtmlRef,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
Loading…
Reference in New Issue
Block a user