refactor: 修改为setup形式
This commit is contained in:
dap
parent
731c9be4f1
commit
ba6785931d
@ -1,72 +1,61 @@
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
|
||||
<script setup lang="ts">
|
||||
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';
|
||||
|
||||
export default defineComponent({
|
||||
components: { EchartsUI },
|
||||
props: {
|
||||
data: {
|
||||
default: () => [],
|
||||
type: Array as PropType<{ name: string; value: string }[]>,
|
||||
},
|
||||
},
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
interface Props {
|
||||
data?: { name: string; value: string }[];
|
||||
}
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts, resize } = useEcharts(chartRef);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!chartRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
/**
|
||||
* 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||
* 该饼图组件需要关闭animation
|
||||
*/
|
||||
onActivated(() => resize(false));
|
||||
|
||||
type EChartsOption = Parameters<typeof renderEcharts>['0'];
|
||||
function setEchartsOption(data: any[]) {
|
||||
const option: EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicInOut',
|
||||
center: ['50%', '50%'],
|
||||
data,
|
||||
name: '命令',
|
||||
radius: [15, 95],
|
||||
roseType: 'radius',
|
||||
type: 'pie',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
renderEcharts(option);
|
||||
}
|
||||
|
||||
return {
|
||||
chartRef,
|
||||
};
|
||||
},
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
data: () => [],
|
||||
});
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts, resize } = useEcharts(chartRef);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!chartRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
/**
|
||||
* 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||
* 该饼图组件需要关闭animation
|
||||
*/
|
||||
onActivated(() => resize(false));
|
||||
|
||||
type EChartsOption = Parameters<typeof renderEcharts>['0'];
|
||||
function setEchartsOption(data: any[]) {
|
||||
const option: EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicInOut',
|
||||
center: ['50%', '50%'],
|
||||
data,
|
||||
name: '命令',
|
||||
radius: [15, 95],
|
||||
roseType: 'radius',
|
||||
type: 'pie',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
renderEcharts(option);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,96 +1,87 @@
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
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';
|
||||
|
||||
export default defineComponent({
|
||||
components: { EchartsUI },
|
||||
props: {
|
||||
data: {
|
||||
default: '0',
|
||||
type: String,
|
||||
},
|
||||
interface Props {
|
||||
data?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
data: '0',
|
||||
});
|
||||
|
||||
const memoryHtmlRef = ref<EchartsUIType>();
|
||||
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!memoryHtmlRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
setup(props, { expose }) {
|
||||
expose({});
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const memoryHtmlRef = ref<EchartsUIType>();
|
||||
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
|
||||
onMounted(() => {
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||
onActivated(resize);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (!memoryHtmlRef.value) return;
|
||||
setEchartsOption(props.data);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
/**
|
||||
* 获取最近的十的幂次
|
||||
* 该函数用于寻找大于给定数字num的最近的10的幂次
|
||||
* 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
|
||||
*
|
||||
* @param num {number} 输入的数字，用于寻找最近的十的幂次
|
||||
*/
|
||||
function getNearestPowerOfTen(num: number) {
|
||||
let power = 10;
|
||||
while (power <= num) {
|
||||
power *= 10;
|
||||
}
|
||||
return power;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setEchartsOption(props.data);
|
||||
});
|
||||
// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||
onActivated(resize);
|
||||
|
||||
/**
|
||||
* 获取最近的十的幂次
|
||||
* 该函数用于寻找大于给定数字num的最近的10的幂次
|
||||
* 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
|
||||
*
|
||||
* @param num {number} 输入的数字，用于寻找最近的十的幂次
|
||||
*/
|
||||
function getNearestPowerOfTen(num: number) {
|
||||
let power = 10;
|
||||
while (power <= num) {
|
||||
power *= 10;
|
||||
}
|
||||
return power;
|
||||
}
|
||||
|
||||
type EChartsOption = Parameters<typeof renderEcharts>['0'];
|
||||
function setEchartsOption(value: string) {
|
||||
// x10
|
||||
const formattedValue = Math.floor(Number.parseFloat(value));
|
||||
// 最大值 10以内取10 100以内取100 以此类推
|
||||
const max = getNearestPowerOfTen(formattedValue);
|
||||
const options: EChartsOption = {
|
||||
series: [
|
||||
type EChartsOption = Parameters<typeof renderEcharts>['0'];
|
||||
function setEchartsOption(value: string) {
|
||||
// x10
|
||||
const formattedValue = Math.floor(Number.parseFloat(value));
|
||||
// 最大值 10以内取10 100以内取100 以此类推
|
||||
const max = getNearestPowerOfTen(formattedValue);
|
||||
const options: EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
animation: true,
|
||||
animationDuration: 1000,
|
||||
data: [
|
||||
{
|
||||
animation: true,
|
||||
animationDuration: 1000,
|
||||
data: [
|
||||
{
|
||||
name: '内存消耗',
|
||||
value: Number.parseFloat(value),
|
||||
},
|
||||
],
|
||||
detail: {
|
||||
formatter: `${value}M`,
|
||||
valueAnimation: true,
|
||||
},
|
||||
max,
|
||||
min: 0,
|
||||
name: '峰值',
|
||||
progress: {
|
||||
show: true,
|
||||
},
|
||||
type: 'gauge',
|
||||
name: '内存消耗',
|
||||
value: Number.parseFloat(value),
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${value}M`,
|
||||
detail: {
|
||||
formatter: `${value}M`,
|
||||
valueAnimation: true,
|
||||
},
|
||||
};
|
||||
renderEcharts(options);
|
||||
}
|
||||
|
||||
return {
|
||||
memoryHtmlRef,
|
||||
};
|
||||
},
|
||||
});
|
||||
max,
|
||||
min: 0,
|
||||
name: '峰值',
|
||||
progress: {
|
||||
show: true,
|
||||
},
|
||||
type: 'gauge',
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${value}M`,
|
||||
},
|
||||
};
|
||||
renderEcharts(options);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user