fix: 🐛 访问趋势图表优化,日期时间段计算少一天问题修复

This commit is contained in:
ray
2024-07-01 07:44:32 +08:00
parent 2ca08422b3
commit 02637f71fa

View File

@@ -71,8 +71,8 @@ const setChartOptions = (data: VisitTrendVO) => {
bottom: 0, bottom: 0,
}, },
grid: { grid: {
left: "2%", left: "1%",
right: "7%", right: "5%",
bottom: "10%", bottom: "10%",
containLabel: true, containLabel: true,
}, },
@@ -126,22 +126,31 @@ const setChartOptions = (data: VisitTrendVO) => {
chart.value.setOption(options); chart.value.setOption(options);
}; };
// 计算日期范围 /** 计算起止时间范围 */
const calculateDateRange = () => { const calculateDateRange = () => {
const now = new Date(); const now = new Date();
const endDate = now.toISOString().split("T")[0];
const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const days = dataRange.value === 1 ? 7 : 30; const days = dataRange.value === 1 ? 7 : 30;
const startDate = new Date( const startDate = new Date(endDate);
now.getFullYear(), startDate.setDate(startDate.getDate() - days);
now.getMonth(),
now.getDate() - days // 手动调整日期为当地时间的 23:59:59
) const adjustDateToLocal = (date: Date) => {
.toISOString() date.setHours(23, 59, 59, 999);
.split("T")[0]; return date;
return { startDate, endDate }; };
const adjustedEndDate = adjustDateToLocal(new Date(endDate));
const adjustedStartDate = adjustDateToLocal(new Date(startDate));
const formattedStartDate = adjustedStartDate.toISOString().split("T")[0];
const formattedEndDate = adjustedEndDate.toISOString().split("T")[0];
return { startDate: formattedStartDate, endDate: formattedEndDate };
}; };
// 加载数据 /** 加载数据 */
const loadData = () => { const loadData = () => {
const { startDate, endDate } = calculateDateRange(); const { startDate, endDate } = calculateDateRange();
StatsAPI.getVisitTrend({ StatsAPI.getVisitTrend({
@@ -156,7 +165,7 @@ const handleDateRangeChange = () => {
loadData(); loadData();
}; };
// 下载图表 /** 下载图表 */
const handleDownloadChart = () => { const handleDownloadChart = () => {
if (!chart.value) { if (!chart.value) {
return; return;
@@ -187,13 +196,15 @@ const handleDownloadChart = () => {
}; };
}; };
/** 窗口大小变化时,重置图表大小 */
const handleResize = () => { const handleResize = () => {
if (chart.value) { setTimeout(() => {
chart.value.resize(); if (chart.value) {
} chart.value.resize();
}
}, 100);
}; };
/** 初始化图表 */
// 初始化图表
onMounted(() => { onMounted(() => {
chart.value = markRaw( chart.value = markRaw(
echarts.init(document.getElementById(props.id) as HTMLDivElement) echarts.init(document.getElementById(props.id) as HTMLDivElement)
@@ -203,6 +214,10 @@ onMounted(() => {
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
}); });
onBeforeUnmount(() => {
window.removeEventListener("resize", handleResize);
});
onActivated(() => { onActivated(() => {
handleResize(); handleResize();
}); });