update chart

2026-08-12 00:24:12 +08:00
parent 9c30891f2c
commit 171aee1602
17 changed files with 1554 additions and 697 deletions
@@ -0,0 +1,91 @@
+<template>
+	<section class="chart-section">
+		<h2>登记事件结构</h2>
+		<div ref="chartElement" class="chart" />
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import type { EventItem } from "@/types/EventItem";
+import type { StoreEventRecordDailyStatView } from "@/types/Store";
+import { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";
+
+const props = defineProps<{
+	dateTextList: string[];
+	eventList: EventItem[];
+	selectedEventIdList: string[];
+	statMap: Record<string, StoreEventRecordDailyStatView[]>;
+}>();
+
+const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
+const visibleEventList = computed(() => props.eventList.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
+const chartOption = computed<EChartsOption>(() => ({
+	...buildCustomerBaseChartOption(props.dateTextList),
+	xAxis: {
+		type: "category",
+		data: visibleEventList.value.map(item => item.name || "未命名事件"),
+		axisTick: {
+			show: false
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
+	series: [
+		{
+			name: "登记次数",
+			type: "bar",
+			data: visibleEventList.value.map(item => ({
+				value: countRecordByEvent(item.id || ""),
+				itemStyle: getEventColor(item) ? {
+					color: getEventColor(item)
+				} : undefined
+			}))
+		}
+	]
+}));
+
+const { chartElement } = useCustomerChart(chartOption);
+
+function countRecordByEvent(eventId: string): number {
+	return (props.statMap[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
+}
+
+function getEventColor(event: EventItem): string | undefined {
+	return event.color || undefined;
+}
+</script>
+
+<style scoped lang="less">
+.chart-section {
+	margin: 0 1rem;
+	padding: 1rem;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: .75rem;
+
+	h2 {
+		color: #0f172a;
+		margin: 0 0 .875rem 0;
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.chart {
+		width: 100%;
+		height: 16rem;
+	}
+}
+
+:global(html.theme-dark) {
+	.chart-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		h2 {
+			color: #e2e8f0;
+		}
+	}
+}
+</style>