From 7fceeb1b7df7b95525f391b1eb8e1c411eb093bf Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Sat, 22 Aug 2026 11:39:24 +0800
Subject: [PATCH] fix rest day layout

---
 .../component/StoreEventRecordTrendChart.vue  | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/store/component/StoreEventRecordTrendChart.vue b/src/pages/store/component/StoreEventRecordTrendChart.vue
index a83b46f..2ee8ab0 100644
--- a/src/pages/store/component/StoreEventRecordTrendChart.vue
+++ b/src/pages/store/component/StoreEventRecordTrendChart.vue
@@ -56,11 +56,31 @@ const {
 const legendRowCount = computed(() => countLegendRows(eventList.value.map(event => event.name || "未命名事件")));
 const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
 const legendBottom = computed(() => 20 + legendRowCount.value * 24);
+const showRestDayLabel = computed(() => {
+	const dateCount = visibleDateTextList.value.length;
+	if (!dateCount) {
+		return false;
+	}
+	const gridWidth = Math.max(0, chartWidth.value - 24);
+	return 24 <= gridWidth / dateCount;
+});
 const chartStyle = computed(() => ({
 	height: chartHeight.value
 }));
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
+	xAxis: {
+		type: "category",
+		data: visibleDateTextList.value.map(item => item.slice(5)),
+		axisTick: {
+			show: true,
+			length: 0,
+			interval: 0
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
 	grid: {
 		top: Math.max(48, legendBottom.value),
 		left: 12,
@@ -148,15 +168,15 @@ function getRecordData(eventId: string, dateText: string): number | null {
 
 function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
 	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
-	for (const dateText of visibleDateTextList.value) {
+	for (let dateIndex = 0; dateIndex < visibleDateTextList.value.length; dateIndex++) {
+		const dateText = visibleDateTextList.value[dateIndex];
 		if (restDaySet.value.has(getDateValue(dateText))) {
-			data.push([{ name: "休", xAxis: dateText.slice(5) }, { xAxis: dateText.slice(5) }]);
+			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
 		}
 	}
 	if (!data.length) {
 		return undefined;
 	}
-
 	return {
 		silent: true,
 		itemStyle: {
@@ -167,7 +187,7 @@ function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
 			fontSize: 12,
 			formatter: "休",
 			position: "insideBottom",
-			show: true
+			show: showRestDayLabel.value
 		},
 		data
 	};