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,88 @@
+<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 { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
+
+const props = defineProps<{
+	dateTextList: string[];
+	eventList: EventItem[];
+	statMap: Record<string, StoreEventRecordDailyStatView[]>;
+}>();
+
+const chartOption = computed<EChartsOption>(() => ({
+	...buildStoreBaseChartOption(props.dateTextList),
+	legend: {
+		show: false
+	},
+	xAxis: {
+		type: "category",
+		data: props.eventList.map(item => item.name || "未命名事件"),
+		axisTick: {
+			show: false
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
+	series: [{
+		name: "登记次数",
+		type: "bar",
+		data: props.eventList.map(item => ({
+			value: countRecordByEvent(item.id || ""),
+			itemStyle: getEventColor(item) ? {
+				color: getEventColor(item)
+			} : undefined
+		}))
+	}]
+}));
+
+const { chartElement } = useStoreChart(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 {
+	padding: 1rem;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	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>