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 legendRowCount = computed(() => countLegendRows(eventList.value.map(event => event.name || "未命名事件")));
|
||||||
const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
|
const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
|
||||||
const legendBottom = computed(() => 20 + legendRowCount.value * 24);
|
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(() => ({
|
const chartStyle = computed(() => ({
|
||||||
height: chartHeight.value
|
height: chartHeight.value
|
||||||
}));
|
}));
|
||||||
const chartOption = computed<EChartsOption>(() => ({
|
const chartOption = computed<EChartsOption>(() => ({
|
||||||
...buildStoreBaseChartOption(visibleDateTextList.value),
|
...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: {
|
grid: {
|
||||||
top: Math.max(48, legendBottom.value),
|
top: Math.max(48, legendBottom.value),
|
||||||
left: 12,
|
left: 12,
|
||||||
@@ -148,15 +168,15 @@ function getRecordData(eventId: string, dateText: string): number | null {
|
|||||||
|
|
||||||
function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
|
function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
|
||||||
const data: NonNullable<MarkAreaComponentOption["data"]> = [];
|
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))) {
|
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) {
|
if (!data.length) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
silent: true,
|
silent: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
@@ -167,7 +187,7 @@ function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
|
|||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
formatter: "休",
|
formatter: "休",
|
||||||
position: "insideBottom",
|
position: "insideBottom",
|
||||||
show: true
|
show: showRestDayLabel.value
|
||||||
},
|
},
|
||||||
data
|
data
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user