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";
-
-const props = defineProps<{
-	dateTextList: string[];
-}>();
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
 
 const genderColorMap = {
-	MALE: "#2563eb",
-	FEMALE: "#db2777",
-	UNKNOWN: "#64748b"
+	MALE: "#7A9BFF",
+	FEMALE: "#FF7A9B",
+	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),
-	grid: {
-		top: 24,
-		left: 12,
-		right: 12,
-		bottom: 12,
-		containLabel: true
-	},
+	color: [genderColorMap.MALE, genderColorMap.FEMALE, genderColorMap.UNKNOWN],
 	legend: {
-		show: false
-	},
-	tooltip: {
-		trigger: "item"
-	},
-	xAxis: {
-		type: "category",
-		data: ["男", "女", "未知"],
-		axisTick: {
-			show: false
-		},
-		axisLabel: {
+		bottom: 0,
+		icon: "circle",
+		textStyle: {
 			color: "#52607a"
 		}
 	},
+	tooltip: {
+		trigger: "item",
+		formatter: "{b}：{c} 人（{d}%）"
+	},
 	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
-					}
-				}
-			]
+			type: "pie",
+			top: 4,
+			bottom: 24,
+			radius: ["0%", "58%"],
+			center: ["50%", "46%"],
+			avoidLabelOverlap: true,
+			label: {
+				color: "#52607a",
+				formatter: "{b} {c} 人"
+			},
+			labelLine: {
+				length: 16,
+				length2: 8
+			},
+			data: getGenderPieData()
 		}
 	]
 }));
@@ -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,