fix rest day layout

This commit is contained in:
Timi
2026-08-22 11:39:24 +08:00
parent 2b0554d365
commit 7fceeb1b7d
@@ -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
};