add product/order chart

src/pages/product/component/OrderPaymentChart.vue

@@ -0,0 +1,43 @@
+<template>
+	<gao-chart-card
+		title="付款状态分布"
+		caption="当前订单快照"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderPaymentStatView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderPaymentChart"
+});
+
+const props = defineProps<{
+	list: GaoSalesOrderPaymentStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list;
+	return {
+		...buildHorizontalBarOption(list.map(item => getPaymentStatusText(item.paymentStatus))),
+		legend: { show: false },
+		series: [{
+			name: "订单数",
+			type: "bar",
+			data: list.map(item => getNumber(item.orderCount))
+		}]
+	};
+});
+
+function getPaymentStatusText(value?: string): string {
+	return ({ UNPAID: "未付款", PARTIALLY_PAID: "部分付款", PAID: "已付款" } as Record<string, string>)[value || ""] || "未知状态";
+}
+</script>