twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 修复当菜单折叠或展开时首页 echarts 图表未自适应容器

Browse Source
This commit is contained in:
xiaoxian521 2022-12-28 19:11:47 +08:00
parent 30209f62a9
commit d0ed3be827
3 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/welcome/components/Bar.vue
View File

@ -1,6 +1,12 @@
<script setup lang="ts">
import { ref, computed, type Ref } from "vue";
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
delay,
useDark,
useECharts,
type EchartOptions
} from "@pureadmin/utils";
const { isDark } = useDark();
@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
});
const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>, {
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
theme
});
@ -65,6 +71,13 @@ setOptions(
}
}
);
watch(
() => useAppStoreHook().getSidebarStatus,
() => {
delay(360).then(() => resize());
}
);
</script>
<template>

19
src/views/welcome/components/Line.vue
View File

@ -1,6 +1,12 @@
<script setup lang="ts">
import { ref, computed, type Ref } from "vue";
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
delay,
useDark,
useECharts,
type EchartOptions
} from "@pureadmin/utils";
const { isDark } = useDark();
@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
});
const lineChartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
theme
});
@ -53,6 +59,13 @@ setOptions(
}
}
);
watch(
() => useAppStoreHook().getSidebarStatus,
() => {
delay(360).then(() => resize());
}
);
</script>
<template>

19
src/views/welcome/components/Pie.vue
View File

@ -1,6 +1,12 @@
<script setup lang="ts">
import { ref, computed, type Ref } from "vue";
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
delay,
useDark,
useECharts,
type EchartOptions
} from "@pureadmin/utils";
const { isDark } = useDark();
@ -9,7 +15,7 @@ const theme: EchartOptions["theme"] = computed(() => {
});
const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
theme
});
@ -61,6 +67,13 @@ setOptions(
}
}
);
watch(
() => useAppStoreHook().getSidebarStatus,
() => {
delay(360).then(() => resize());
}
);
</script>
<template>