add tag

src/pages/store/component/StoreEventStructureChart.vue

@@ -1,7 +1,11 @@
 <template>
 	<section class="chart-section">
 		<h2>事件结构</h2>
-		<div ref="chartElement" class="chart" />
+		<div
+			ref="chartElement"
+			class="chart"
+			:style="chartStyle"
+		/>
 	</section>
 </template>
 
@@ -14,6 +18,8 @@ import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
 
+const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"];
+
 const props = defineProps<{
 	dateTextList: string[];
 }>();
@@ -24,18 +30,36 @@ const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
 let statRequestId = 0;
 
+// ---------- 图表窗口 ----------
+
+const chartWidth = ref(window.innerWidth);
 const shouldRotateAxisLabel = computed(() => eventList.value.length > 4 || eventList.value.some(item => 6 < getEventName(item).length));
+const legendRowCount = computed(() => countLegendRows(eventList.value.map(getEventName)));
+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(props.dateTextList),
 	grid: {
-		top: 24,
+		top: Math.max(16, legendBottom.value),
 		left: 12,
 		right: 12,
 		bottom: 0,
 		containLabel: true
 	},
 	legend: {
-		show: false
+		top: 0,
+		type: "scroll",
+		icon: "roundRect",
+		textStyle: {
+			color: "#52607a"
+		}
+	},
+	tooltip: {
+		trigger: "item",
+		formatter: "{a}：{c} 次"
 	},
 	xAxis: {
 		type: "category",
@@ -52,19 +76,19 @@ const chartOption = computed<EChartsOption>(() => ({
 			width: shouldRotateAxisLabel.value ? 72 : 56
 		}
 	},
-	series: [{
-		name: "登记次数",
+	series: eventList.value.map((event, index) => ({
+		name: getEventName(event),
 		type: "bar",
-		data: eventList.value.map(item => ({
-			value: countRecordByEvent(item.id || ""),
-			itemStyle: getEventColor(item) ? {
-				color: getEventColor(item)
-			} : undefined
-		}))
-	}]
+		stack: "event",
+		itemStyle: {
+			color: getEventLegendColor(event, index)
+		},
+		data: eventList.value.map(item => item.id === event.id ? countRecordByEvent(event.id || "") : undefined)
+	}))
 }));
 
 const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
 	await loadDailyStat();
@@ -73,10 +97,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();
 }
@@ -112,6 +146,10 @@ function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }
 
+function getEventLegendColor(event: EventItem, index: number): string {
+	return getEventColor(event) || chartColorList[index % chartColorList.length];
+}
+
 function getEventName(event: EventItem): string {
 	return event.name || "未命名事件";
 }
@@ -120,6 +158,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) {