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,108 @@
+<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 { CustomerGenderStatView } from "@/types/Customer";
+import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
+
+const props = defineProps<{
+	dateTextList: string[];
+	statList: CustomerGenderStatView[];
+}>();
+
+const genderColorMap = {
+	MALE: "#2563eb",
+	FEMALE: "#db2777",
+	UNKNOWN: "#64748b"
+} as const;
+
+const chartOption = computed<EChartsOption>(() => ({
+	...buildStoreBaseChartOption(props.dateTextList),
+	tooltip: {
+		trigger: "item"
+	},
+	xAxis: {
+		type: "category",
+		data: ["男", "女", "未知"],
+		axisTick: {
+			show: false
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
+	series: [
+		{
+			name: "客户数",
+			type: "bar",
+			barWidth: 24,
+			data: [
+				{
+					name: "男",
+					value: getGenderCount("MALE"),
+					itemStyle: {
+						color: genderColorMap.MALE
+					}
+				},
+				{
+					name: "女",
+					value: getGenderCount("FEMALE"),
+					itemStyle: {
+						color: genderColorMap.FEMALE
+					}
+				},
+				{
+					name: "未知",
+					value: getGenderCount("UNKNOWN"),
+					itemStyle: {
+						color: genderColorMap.UNKNOWN
+					}
+				}
+			]
+		}
+	]
+}));
+
+const { chartElement } = useStoreChart(chartOption);
+
+function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
+	return props.statList.find(item => item.genderCode === genderCode)?.count || 0;
+}
+</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>