81 lines
1.8 KiB
Vue
81 lines
1.8 KiB
Vue
<template>
|
|
<date-range-chart-card
|
|
title="产品购买排行"
|
|
caption="基础单位购买及履约进度，前 10"
|
|
:option="chartOption"
|
|
:loading="loading"
|
|
height="14rem"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import DateRangeChartCard from "@/components/DateRangeChartCard.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>
|