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

fix: auto resize echart on menu collapsed, fixed #2265

This commit is contained in:
无木 2022-10-29 10:05:44 +08:00
parent 58b30aae9a
commit e962fa039a
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/hooks/web/useECharts.ts
View File

@ -8,12 +8,14 @@ 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';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
export function useECharts( export function useECharts(
elRef: Ref<HTMLDivElement>, elRef: Ref<HTMLDivElement>,
theme: 'light' | 'dark' | 'default' = 'default', theme: 'light' | 'dark' | 'default' = 'default',
) { ) {
const { getDarkMode: getSysDarkMode } = useRootSetting(); const { getDarkMode: getSysDarkMode } = useRootSetting();
const { getCollapsed } = useMenuSetting();
const getDarkMode = computed(() => { const getDarkMode = computed(() => {
return theme === 'default' ? getSysDarkMode.value : theme; return theme === 'default' ? getSysDarkMode.value : theme;
@ -98,6 +100,12 @@ export function useECharts(
}, },
); );
watch(getCollapsed, (_) => {
useTimeoutFn(() => {
resizeFn();
}, 300);
});
tryOnUnmounted(() => { tryOnUnmounted(() => {
if (!chartInstance) return; if (!chartInstance) return;
removeResizeFn(); removeResizeFn();