修复首页图表resize逻辑并添加组件卸载时的资源清理

This commit is contained in:
WUSIJIAN
2025-12-22 15:26:34 +08:00
parent ac0b790363
commit 4fedcd16df
2 changed files with 100 additions and 87 deletions

View File

@@ -66,7 +66,7 @@
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@@ -492,10 +492,17 @@ export default defineComponent({
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
nextTick(() => {
for (let i = 0; i < state.myCharts.length; i++) {
for (let i = state.myCharts.length - 1; i >= 0; i--) {
const chart = state.myCharts[i] as any;
if (!chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) {
state.myCharts.splice(i, 1);
continue;
}
setTimeout(() => {
(<any>state.myCharts[i]).resize();
}, i * 1000);
if (chart && typeof chart.resize === 'function' && !(chart.isDisposed && chart.isDisposed())) {
chart.resize();
}
}, (state.myCharts.length - 1 - i) * 200);
}
});
};
@@ -507,6 +514,10 @@ export default defineComponent({
onMounted(() => {
initEchartsResize();
});
onUnmounted(() => {
window.removeEventListener('resize', initEchartsResizeFun);
state.myCharts.length = 0;
});
// 由于页面缓存原因keep-alive
onActivated(() => {
initEchartsResizeFun();