fix rest day layout
This commit is contained in:
@@ -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
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user