pie chart

src/pages/store/component/StoreCustomerGenderChart.vue

@@ -9,16 +9,18 @@
 import type { EChartsOption } from "echarts";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import type { CustomerGenderStatView } from "@/types/Customer";
-import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
-
-const props = defineProps<{
-	dateTextList: string[];
-}>();
 
 const genderColorMap = {
-	MALE: "#2563eb",
+	MALE: "#7A9BFF",
-	FEMALE: "#db2777",
+	FEMALE: "#FF7A9B",
-	UNKNOWN: "#64748b"
+	UNKNOWN: "#CCC"
+} as const;
+
+const genderNameMap = {
+	MALE: "男",
+	FEMALE: "女",
+	UNKNOWN: "未知"
 } as const;
 
 // ---------- 图表数据 ----------
@@ -26,58 +28,36 @@ const genderColorMap = {
 const statList = ref<CustomerGenderStatView[]>([]);
 
 const chartOption = computed<EChartsOption>(() => ({
-	...buildStoreBaseChartOption(props.dateTextList),
+	color: [genderColorMap.MALE, genderColorMap.FEMALE, genderColorMap.UNKNOWN],
-	grid: {
-		top: 24,
-		left: 12,
-		right: 12,
-		bottom: 12,
-		containLabel: true
-	},
 	legend: {
-		show: false
+		bottom: 0,
-	},
+		icon: "circle",
-	tooltip: {
+		textStyle: {
-		trigger: "item"
-	},
-	xAxis: {
-		type: "category",
-		data: ["男", "女", "未知"],
-		axisTick: {
-			show: false
-		},
-		axisLabel: {
 			color: "#52607a"
 		}
 	},
+	tooltip: {
+		trigger: "item",
+		formatter: "{b}：{c} 人（{d}%）"
+	},
 	series: [
 		{
 			name: "客户数",
-			type: "bar",
+			type: "pie",
-			barWidth: 24,
+			top: 4,
-			data: [
+			bottom: 24,
-				{
+			radius: ["0%", "58%"],
-					name: "男",
+			center: ["50%", "46%"],
-					value: getGenderCount("MALE"),
+			avoidLabelOverlap: true,
-					itemStyle: {
+			label: {
-						color: genderColorMap.MALE
+				color: "#52607a",
-					}
+				formatter: "{b} {c} 人"
 			},
-				{
+			labelLine: {
-					name: "女",
+				length: 16,
-					value: getGenderCount("FEMALE"),
+				length2: 8
-					itemStyle: {
-						color: genderColorMap.FEMALE
-					}
 			},
-				{
+			data: getGenderPieData()
-					name: "未知",
-					value: getGenderCount("UNKNOWN"),
-					itemStyle: {
-						color: genderColorMap.UNKNOWN
-					}
-				}
-			]
 		}
 	]
 }));
@@ -95,6 +75,16 @@ async function loadCustomerGenderStat(): Promise<void> {
 function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
 	return statList.value.find(item => item.genderCode === genderCode)?.count || 0;
 }
+
+function getGenderPieData(): Array<{ name: string; value: number; itemStyle: { color: string } }> {
+	return Object.entries(genderNameMap).map(([genderCode, name]) => ({
+		name,
+		value: getGenderCount(genderCode as keyof typeof genderNameMap),
+		itemStyle: {
+			color: genderColorMap[genderCode as keyof typeof genderColorMap]
+		}
+	}));
+}
 </script>
 
 <style scoped lang="less">

src/pages/store/component/useStoreChart.ts

@@ -1,5 +1,5 @@
 import type { ECharts, EChartsOption } from "echarts";
-import { BarChart, LineChart } from "echarts/charts";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
 import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
 import { init, use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
@@ -8,6 +8,7 @@ import type { ComputedRef, Ref } from "vue";
 use([
 	BarChart,
 	LineChart,
+	PieChart,
 	GridComponent,
 	LegendComponent,
 	TooltipComponent,