fix: echarts切换页面时动画效果 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IANPQN
This commit is contained in:
parent
17aa044da7
commit
e4d64e3f20
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { EChartsOption } from 'echarts';
|
import type { EChartsOption } from 'echarts';
|
||||||
|
|
||||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
EchartsUI,
|
EchartsUI,
|
||||||
@ -21,7 +21,7 @@ export default defineComponent({
|
|||||||
expose({});
|
expose({});
|
||||||
|
|
||||||
const chartRef = ref<EchartsUIType>();
|
const chartRef = ref<EchartsUIType>();
|
||||||
const { renderEcharts } = useEcharts(chartRef);
|
const { renderEcharts, resize } = useEcharts(chartRef);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
@ -35,6 +35,11 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
});
|
});
|
||||||
|
/**
|
||||||
|
* 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||||
|
* 该饼图组件需要关闭animation
|
||||||
|
*/
|
||||||
|
onActivated(() => resize(false));
|
||||||
|
|
||||||
function setEchartsOption(data: any[]) {
|
function setEchartsOption(data: any[]) {
|
||||||
const option: EChartsOption = {
|
const option: EChartsOption = {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { EChartsOption } from 'echarts';
|
import type { EChartsOption } from 'echarts';
|
||||||
|
|
||||||
import { defineComponent, onMounted, ref, watch } from 'vue';
|
import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
EchartsUI,
|
EchartsUI,
|
||||||
@ -21,7 +21,7 @@ export default defineComponent({
|
|||||||
expose({});
|
expose({});
|
||||||
|
|
||||||
const memoryHtmlRef = ref<EchartsUIType>();
|
const memoryHtmlRef = ref<EchartsUIType>();
|
||||||
const { renderEcharts } = useEcharts(memoryHtmlRef);
|
const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.data,
|
() => props.data,
|
||||||
@ -35,6 +35,8 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setEchartsOption(props.data);
|
setEchartsOption(props.data);
|
||||||
});
|
});
|
||||||
|
// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
|
||||||
|
onActivated(resize);
|
||||||
|
|
||||||
function getNearestPowerOfTen(num: number) {
|
function getNearestPowerOfTen(num: number) {
|
||||||
let power = 10;
|
let power = 10;
|
||||||
|
@ -74,12 +74,14 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function resize() {
|
function resize(withAnimation = true) {
|
||||||
chartInstance?.resize({
|
chartInstance?.resize({
|
||||||
animation: {
|
animation: withAnimation
|
||||||
|
? {
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: 'quadraticIn',
|
easing: 'quadraticIn',
|
||||||
},
|
}
|
||||||
|
: undefined,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user