update charts

src/pages/store/component/StoreCustomerGenderChart.vue

@@ -7,12 +7,12 @@
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
 import type { CustomerGenderStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
 
 const props = defineProps<{
 	dateTextList: string[];
-	statList: CustomerGenderStatView[];
 }>();
 
 const genderColorMap = {
@@ -21,6 +21,10 @@ const genderColorMap = {
 	UNKNOWN: "#64748b"
 } as const;
 
+// ---------- 图表数据 ----------
+
+const statList = ref<CustomerGenderStatView[]>([]);
+
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
 	tooltip: {
@@ -70,8 +74,16 @@ const chartOption = computed<EChartsOption>(() => ({
 
 const { chartElement } = useStoreChart(chartOption);
 
+onMounted(async () => {
+	await loadCustomerGenderStat();
+});
+
+async function loadCustomerGenderStat(): Promise<void> {
+	statList.value = await StoreChartAPI.customerGenderStat();
+}
+
 function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
-	return props.statList.find(item => item.genderCode === genderCode)?.count || 0;
+	return statList.value.find(item => item.genderCode === genderCode)?.count || 0;
 }
 </script>