fix store chart style

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));
 }