fix: 🐛 访问趋势图表优化,日期时间段计算少一天问题修复
This commit is contained in:
@@ -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();
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user