by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: echarts切换页面时动画效果 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IANPQN

Browse Source
This commit is contained in:
dap 2024-09-02 15:59:58 +08:00
parent 17aa044da7
commit e4d64e3f20
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/views/monitor/cache/components/CommandChart.vue vendored
View File

@ -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 = {

6
apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue vendored
View File

@ -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;

8
packages/effects/plugins/src/echarts/use-echarts.ts
View File

@ -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,
}); });
} }