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