add product sku

src/pages/customer/component/CustomerOrderProductRankChart.vue

@@ -0,0 +1,81 @@
+<template>
+	<gao-chart-card
+		title="客户产品购买排行"
+		caption="基础单位购买及履约进度，前 10"
+		: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 { GaoCustomerOrderProductRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerOrderProductRankChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerOrderProductRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		legend: {
+			top: 0,
+			icon: "roundRect",
+			textStyle: { color: "#52607a" }
+		},
+		grid: {
+			top: 32,
+			left: 8,
+			right: 18,
+			bottom: 12,
+			containLabel: true
+		},
+		series: [
+			{
+				name: "直接购买",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.directBaseQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.packageBaseQuantity))
+			},
+			{
+				name: "待履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.reservedBaseQuantity))
+			},
+			{
+				name: "已履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.fulfilledBaseQuantity))
+			},
+			{
+				name: "可履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.availableBaseQuantity))
+			}
+		]
+	};
+});
+
+function getProductName(item: GaoCustomerOrderProductRankView): string {
+	return item.productName || "未命名产品";
+}
+</script>