add product sku

src/pages/customer/component/CustomerRepeatIntervalChart.vue

@@ -0,0 +1,43 @@
+<template>
+	<gao-chart-card
+		title="复购间隔"
+		caption="按间隔天数统计订单数"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerRepeatIntervalStatView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerRepeatIntervalChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerRepeatIntervalStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = [...props.list].sort((left, right) => getNumber(left.intervalDays) - getNumber(right.intervalDays));
+	return {
+		...buildHorizontalBarOption(list.map(getIntervalText)),
+		legend: { show: false },
+		series: [{
+			name: "复购订单",
+			type: "bar",
+			data: list.map(item => getNumber(item.orderCount))
+		}]
+	};
+});
+
+function getIntervalText(item: GaoCustomerRepeatIntervalStatView): string {
+	return `${getNumber(item.intervalDays)} 天`;
+}
+</script>