Commit e962fa039ac9f2814676d677d30750f581d13c64

Authored by 无木
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();