add product/order chart

src/pages/product/component/ProductFulfillmentRankChart.vue

@@ -0,0 +1,57 @@
+<template>
+	<gao-chart-card
+		title="履约进度排行"
+		caption="购买数量的当前履约快照"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductFulfillmentRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductFulfillmentRankChart"
+});
+
+const props = defineProps<{
+	list: GaoProductFulfillmentRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		series: [
+			{
+				name: "待履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.reservedQuantity))
+			},
+			{
+				name: "已履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.fulfilledQuantity))
+			},
+			{
+				name: "可履约",
+				type: "bar",
+				stack: "progress",
+				data: list.map(item => getNumber(item.availableQuantity))
+			}
+		]
+	};
+});
+
+function getProductName(item: GaoProductFulfillmentRankView): string {
+	return item.productName || "未命名产品";
+}
+</script>