Commit e962fa039ac9f2814676d677d30750f581d13c64
1 parent
58b30aae
fix: auto resize echart on menu collapsed, fixed #2265
Showing
1 changed file
with
8 additions
and
0 deletions
src/hooks/web/useECharts.ts
@@ -8,12 +8,14 @@ import { useEventListener } from '/@/hooks/event/useEventListener'; | @@ -8,12 +8,14 @@ import { useEventListener } from '/@/hooks/event/useEventListener'; | ||
8 | import { useBreakpoint } from '/@/hooks/event/useBreakpoint'; | 8 | import { useBreakpoint } from '/@/hooks/event/useBreakpoint'; |
9 | import echarts from '/@/utils/lib/echarts'; | 9 | import echarts from '/@/utils/lib/echarts'; |
10 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; | 10 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
11 | +import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | ||
11 | 12 | ||
12 | export function useECharts( | 13 | export function useECharts( |
13 | elRef: Ref<HTMLDivElement>, | 14 | elRef: Ref<HTMLDivElement>, |
14 | theme: 'light' | 'dark' | 'default' = 'default', | 15 | theme: 'light' | 'dark' | 'default' = 'default', |
15 | ) { | 16 | ) { |
16 | const { getDarkMode: getSysDarkMode } = useRootSetting(); | 17 | const { getDarkMode: getSysDarkMode } = useRootSetting(); |
18 | + const { getCollapsed } = useMenuSetting(); | ||
17 | 19 | ||
18 | const getDarkMode = computed(() => { | 20 | const getDarkMode = computed(() => { |
19 | return theme === 'default' ? getSysDarkMode.value : theme; | 21 | return theme === 'default' ? getSysDarkMode.value : theme; |
@@ -98,6 +100,12 @@ export function useECharts( | @@ -98,6 +100,12 @@ export function useECharts( | ||
98 | }, | 100 | }, |
99 | ); | 101 | ); |
100 | 102 | ||
103 | + watch(getCollapsed, (_) => { | ||
104 | + useTimeoutFn(() => { | ||
105 | + resizeFn(); | ||
106 | + }, 300); | ||
107 | + }); | ||
108 | + | ||
101 | tryOnUnmounted(() => { | 109 | tryOnUnmounted(() => { |
102 | if (!chartInstance) return; | 110 | if (!chartInstance) return; |
103 | removeResizeFn(); | 111 | removeResizeFn(); |