fix: Echarts初始宽度监听修复

This commit is contained in:
雪忆
2024-07-29 15:11:06 +08:00
parent ecfe66a019
commit 95abe06107

View File

@@ -1,8 +1,8 @@
import type { EChartsOption } from 'echarts'; import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { computed, nextTick, ref, unref, watch } from 'vue';
import { useTimeoutFn } from '@vben/hooks'; import { useTimeoutFn } from '@vben/hooks';
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core'; import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import { unref, nextTick, watch, computed, ref } from 'vue';
import { useEventListener } from '@/hooks/event/useEventListener'; import { useEventListener } from '@/hooks/event/useEventListener';
import { useBreakpoint } from '@/hooks/event/useBreakpoint'; import { useBreakpoint } from '@/hooks/event/useBreakpoint';
import echarts from '@/utils/lib/echarts'; import echarts from '@/utils/lib/echarts';
@@ -49,6 +49,10 @@ export function useECharts(
listener: resizeFn, listener: resizeFn,
}); });
removeResizeFn = removeEvent; removeResizeFn = removeEvent;
const resizeObserver = new ResizeObserver(resizeFn);
resizeObserver.observe(el);
const { widthRef, screenEnum } = useBreakpoint(); const { widthRef, screenEnum } = useBreakpoint();
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) { if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
useTimeoutFn(() => { useTimeoutFn(() => {
@@ -64,7 +68,7 @@ export function useECharts(
useTimeoutFn(() => { useTimeoutFn(() => {
setOptions(unref(getOptions)); setOptions(unref(getOptions));
resolve(null); resolve(null);
}, 30); }, 50);
} }
nextTick(() => { nextTick(() => {
useTimeoutFn(() => { useTimeoutFn(() => {