lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 🐛 修复echart图表在keep-alive缓存下切换其他页面缩放后再返回页面不能自适应问题

This commit is contained in:
hxr 2024-02-15 09:32:14 +08:00
parent cc6e2374dc
commit 972622d96d
5 changed files with 124 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/dashboard/components/BarChart.vue
View File

@ -138,20 +138,7 @@ const options = {
},
],
};
const chart = ref<any>("");
onMounted(() => {
// 图表初始化
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.value.setOption(options);
// 大小自适应
window.addEventListener("resize", () => {
chart.value.resize();
});
});
const downloadEchart = () => {
// 获取画布图表地址信息
const img = new Image();
@ -177,6 +164,28 @@ const downloadEchart = () => {
}
};
};
const chart = ref<any>("");
onMounted(() => {
// 图表初始化
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.value.setOption(options);
// 大小自适应
window.addEventListener("resize", () => {
console.log("自适应事件触发");
chart.value.resize();
});
});
onActivated(() => {
if (chart.value) {
chart.value.resize();
}
});
</script>
<style lang="scss" scoped>
.title {

17
src/views/dashboard/components/FunnelChart.vue
View File

@ -93,14 +93,23 @@ const options = {
],
};
const chart = ref<any>("");
onMounted(() => {
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.setOption(options);
chart.value.setOption(options);
window.addEventListener("resize", () => {
chart.resize();
chart.value.resize();
});
});
onActivated(() => {
if (chart.value) {
chart.value.resize();
}
});
</script>

18
src/views/dashboard/components/PieChart.vue
View File

@ -67,13 +67,23 @@ const options = {
],
};
const chart = ref<any>("");
onMounted(() => {
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.setOption(options);
chart.value.setOption(options);
window.addEventListener("resize", () => {
chart.resize();
chart.value.resize();
});
});
onActivated(() => {
if (chart.value) {
chart.value.resize();
}
});
</script>

17
src/views/dashboard/components/RadarChart.vue
View File

@ -87,14 +87,23 @@ const options = {
],
};
const chart = ref<any>("");
onMounted(() => {
const chart = echarts.init(
document.getElementById(props.id) as HTMLDivElement
chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement)
);
chart.setOption(options);
chart.value.setOption(options);
window.addEventListener("resize", () => {
chart.resize();
chart.value.resize();
});
});
onActivated(() => {
if (chart.value) {
chart.value.resize();
}
});
</script>

124
src/views/dashboard/index.vue
View File

@ -1,65 +1,3 @@
<script setup lang="ts">
defineOptions({
name: "Dashboard",
inheritAttrs: false,
});
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
const userStore = useUserStore();
const date: Date = new Date();
const greetings = computed(() => {
const hours = date.getHours();
if (hours >= 6 && hours < 8) {
return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
} else if (hours >= 8 && hours < 12) {
return "上午好，" + useUserStore().user.nickname + "！";
} else if (hours >= 12 && hours < 18) {
return "下午好，" + useUserStore().user.nickname + "！";
} else if (hours >= 18 && hours < 24) {
return "晚上好，" + useUserStore().user.nickname + "！";
} else if (hours >= 0 && hours < 6) {
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
}
});
const duration = 5000;
// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;
// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;
// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;
// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;
</script>
<template>
<div class="dashboard-container">
<!-- github角标 -->
@ -254,6 +192,68 @@ orderCount.value = 2000;
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "Dashboard",
inheritAttrs: false,
});
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
const userStore = useUserStore();
const date: Date = new Date();
const greetings = computed(() => {
const hours = date.getHours();
if (hours >= 6 && hours < 8) {
return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
} else if (hours >= 8 && hours < 12) {
return "上午好，" + useUserStore().user.nickname + "！";
} else if (hours >= 12 && hours < 18) {
return "下午好，" + useUserStore().user.nickname + "！";
} else if (hours >= 18 && hours < 24) {
return "晚上好，" + useUserStore().user.nickname + "！";
} else if (hours >= 0 && hours < 6) {
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
}
});
const duration = 5000;
// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;
// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;
// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
dauCount.value = 2000;
// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
duration: duration,
transition: TransitionPresets.easeOutExpo,
});
orderCount.value = 2000;
</script>
<style lang="scss" scoped>
.dashboard-container {
position: relative;