update order chart style

src/pages/product/component/OrderReceivableCard.vue

@@ -2,25 +2,17 @@
 	<section class="receivable-section">
 		<div class="title-row">
 			<h2 v-text="'应收构成'" />
-			<span class="caption" v-text="'时间范围内创建订单的当前快照'" />
-		</div>
-		<div class="receivable-list">
-			<div v-for="item in detailList" :key="item.label" class="receivable-item">
-				<span v-text="item.label" />
-				<strong v-text="item.value" />
-			</div>
+			<span class="caption">成交金额拆分；待收余额已扣除待核销</span>
 		</div>
+		<div ref="chartElement" class="chart" />
 	</section>
 </template>
 
 <script setup lang="ts">
+import type { EChartsOption } from "echarts";
 import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
-import { formatMoney } from "@/pages/product/component/chartUtils";
-
-type DetailItem = {
-	label: string;
-	value: string;
-};
+import { buildPieChartOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
 
 defineOptions({
 	name: "OrderReceivableCard"
@@ -30,13 +22,40 @@ const props = defineProps<{
 	receivable: GaoSalesOrderReceivableStatView;
 }>();
 
-const detailList = computed<DetailItem[]>(() => [
-	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
-	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
-	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
-	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
-	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
-]);
+const chartOption = computed<EChartsOption>(() => {
+	const pendingPaidAmount = getNumber(props.receivable.pendingPaidAmount);
+	const unpaidAmount = getNumber(props.receivable.unpaidAmount);
+	return {
+		...buildPieChartOption(),
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: params => {
+				const item = Array.isArray(params) ? params[0] : params;
+				return item
+					? `${item.name}：${formatChartYuan(Number(item.value))} 元（${item.percent}%）`
+					: "";
+			}
+		},
+		series: [
+			{
+				name: "成交金额",
+				type: "pie",
+				radius: ["0%", "58%"],
+				center: ["50%", "44%"],
+				label: { color: "#52607a", formatter: "{b} {d}%" },
+				data: [
+					{ name: "净收款", value: getNumber(props.receivable.netPaidAmount) / 100 },
+					{ name: "有效退款", value: getNumber(props.receivable.refundedAmount) / 100 },
+					{ name: "待核销", value: pendingPaidAmount / 100 },
+					{ name: "待收余额", value: Math.max(0, unpaidAmount - pendingPaidAmount) / 100 }
+				]
+			}
+		]
+	};
+});
+
+const { chartElement } = useStoreChart(chartOption);
 </script>
 
 <style scoped lang="less">
@@ -65,30 +84,9 @@ const detailList = computed<DetailItem[]>(() => [
 		font-size: .6875rem;
 	}
 
-	.receivable-list {
-		gap: .5rem;
-		display: grid;
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
-
-	.receivable-item {
-		padding: .625rem .5rem;
-		background: rgba(241, 245, 249, .8);
-		border-radius: .75rem;
-
-		span {
-			color: #64748b;
-			display: block;
-			font-size: .6875rem;
-		}
-
-		strong {
-			color: #0f172a;
-			margin-top: .25rem;
-			display: block;
-			font-size: .8125rem;
-			font-weight: 700;
-		}
+	.chart {
+		width: 100%;
+		height: 15rem;
 	}
 }
 
@@ -101,23 +99,6 @@ const detailList = computed<DetailItem[]>(() => [
 			color: #e2e8f0;
 		}
 
-		.receivable-item {
-			background: rgba(30, 41, 59, .88);
-
-			span {
-				color: #94a3b8;
-			}
-
-			strong {
-				color: #e2e8f0;
-			}
-		}
-	}
-}
-
-@media (max-width: 42rem) {
-	.receivable-list {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 }
 </style>