43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<date-range-chart-card
|
|
title="复购间隔"
|
|
caption="按间隔天数统计订单数"
|
|
:option="chartOption"
|
|
:loading="loading"
|
|
height="14rem"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import DateRangeChartCard from "@/components/DateRangeChartCard.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>
|