修复首页图表resize逻辑并添加组件卸载时的资源清理
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user