fix store chart style

src/pages/store/component/StoreCustomerGenderChart.vue

@@ -27,6 +27,16 @@ const statList = ref<CustomerGenderStatView[]>([]);
 
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
+	grid: {
+		top: 24,
+		left: 12,
+		right: 12,
+		bottom: 12,
+		containLabel: true
+	},
+	legend: {
+		show: false
+	},
 	tooltip: {
 		trigger: "item"
 	},

src/pages/store/component/StoreEventRecordTrendChart.vue

@@ -1,7 +1,11 @@
 <template>
 	<section class="chart-section">
 		<h2>登记量趋势</h2>
-		<div ref="chartElement" class="chart" />
+		<div
+			ref="chartElement"
+			class="chart"
+			:style="chartStyle"
+		/>
 		<chart-range-slider
 			v-if="showSlider"
 			:model-value="sliderValue"
@@ -35,6 +39,7 @@ let statRequestId = 0;
 
 // ---------- 图表窗口 ----------
 
+const chartWidth = ref(window.innerWidth);
 const dateTextList = computed(() => props.dateTextList);
 const {
 	rangeText,
@@ -44,8 +49,21 @@ const {
 	visibleDateTextList,
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
+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 chartStyle = computed(() => ({
+	height: chartHeight.value
+}));
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
+	grid: {
+		top: Math.max(48, legendBottom.value),
+		left: 12,
+		right: 12,
+		bottom: 12,
+		containLabel: true
+	},
 	series: eventList.value.map(event => ({
 		name: event.name || "未命名事件",
 		type: "bar",
@@ -58,6 +76,7 @@ const chartOption = computed<EChartsOption>(() => ({
 }));
 
 const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
 	await loadDailyStat();
@@ -66,10 +85,20 @@ watch(() => props.dateTextList, async () => {
 });
 
 onMounted(async () => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
 	await loadEvents();
 	await loadDailyStat();
 });
 
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
 async function loadEvents(): Promise<void> {
 	eventList.value = await EventAPI.listValid();
 }
@@ -110,6 +139,30 @@ function getEventIdList(): string[] {
 	return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
 }
 
+function updateChartWidth(): void {
+	const width = chartElement.value?.clientWidth || window.innerWidth;
+	chartWidth.value = Math.max(1, width);
+}
+
+function countLegendRows(nameList: string[]): number {
+	let rowCount = 1;
+	let rowWidth = 0;
+	const maxWidth = Math.max(160, chartWidth.value - 24);
+	for (const name of nameList) {
+		const itemWidth = estimateLegendItemWidth(name);
+		if (0 < rowWidth && maxWidth < rowWidth + itemWidth) {
+			rowCount++;
+			rowWidth = 0;
+		}
+		rowWidth += itemWidth;
+	}
+	return rowCount;
+}
+
+function estimateLegendItemWidth(name: string): number {
+	return Math.min(chartWidth.value, 38 + Array.from(name).length * 14);
+}
+
 function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
 	const map: Record<string, StoreEventRecordDailyStatView[]> = {};
 	for (const item of list) {

src/pages/store/component/StoreEventStructureChart.vue

@@ -24,19 +24,32 @@ const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
 let statRequestId = 0;
 
+const shouldRotateAxisLabel = computed(() => eventList.value.length > 4 || eventList.value.some(item => 6 < getEventName(item).length));
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
+	grid: {
+		top: 24,
+		left: 12,
+		right: 12,
+		bottom: shouldRotateAxisLabel.value ? 68 : 36,
+		containLabel: true
+	},
 	legend: {
 		show: false
 	},
 	xAxis: {
 		type: "category",
-		data: eventList.value.map(item => item.name || "未命名事件"),
+		data: eventList.value.map(getEventName),
 		axisTick: {
 			show: false
 		},
 		axisLabel: {
-			color: "#52607a"
+			color: "#52607a",
+			hideOverlap: true,
+			interval: 0,
+			overflow: "truncate",
+			rotate: shouldRotateAxisLabel.value ? 45 : 0,
+			width: shouldRotateAxisLabel.value ? 72 : 56
 		}
 	},
 	series: [{
@@ -99,6 +112,10 @@ function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }
 
+function getEventName(event: EventItem): string {
+	return event.name || "未命名事件";
+}
+
 function getEventIdList(): string[] {
 	return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
 }

src/pages/store/component/useStoreChart.ts

@@ -87,6 +87,7 @@ export function useStoreChart(option: ComputedRef<EChartsOption> | Ref<EChartsOp
 		}
 		chart = chart || init(chartElement.value);
 		chart.setOption(option.value, true);
+		chart.resize();
 	}
 
 	function resizeChart(): void {