zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3986 from 1455668754/main 

fix: Echarts初始宽度监听修复
This commit is contained in:
vince 2024-08-01 05:11:35 +08:00 committed by GitHub
parent 77a0ad450d f314826230
commit d9bfe96dad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/hooks/web/useECharts.ts
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(() => {