89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<template>
|
|
<date-range-chart-card
|
|
title="订单每日趋势"
|
|
caption="金额已换算为元"
|
|
:date-text-list="dateTextList"
|
|
:option="buildOption"
|
|
:loading="loading"
|
|
height="12rem"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
|
|
import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
|
|
import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
|
|
import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
|
|
|
|
defineOptions({
|
|
name: "OrderDailyChart"
|
|
});
|
|
|
|
const props = defineProps<{
|
|
dateTextList: string[];
|
|
list: GaoSalesOrderDailyStatView[];
|
|
loading: boolean;
|
|
}>();
|
|
|
|
const dateTextList = computed(() => props.dateTextList);
|
|
const { restDaySet } = useRestDayCalendar(dateTextList);
|
|
|
|
function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
|
|
const labelList = visibleDateTextList.map(item => item.slice(5));
|
|
return {
|
|
...buildAxisChartOption(labelList),
|
|
xAxis: {
|
|
type: "category",
|
|
data: labelList,
|
|
axisTick: { show: true, length: 0, interval: 0 },
|
|
axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "订单",
|
|
minInterval: 1,
|
|
axisLabel: { color: "#52607a" },
|
|
splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
|
|
},
|
|
{
|
|
type: "value",
|
|
name: "元",
|
|
axisLabel: {
|
|
color: "#52607a",
|
|
formatter: (value: number) => formatChartYuan(value)
|
|
},
|
|
splitLine: { show: false }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "订单数",
|
|
type: "bar",
|
|
yAxisIndex: 0,
|
|
markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
|
|
tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
|
|
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
|
|
},
|
|
{
|
|
name: "成交金额",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
|
|
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.saleAmount) / 100)
|
|
},
|
|
{
|
|
name: "净收款",
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
smooth: true,
|
|
tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
|
|
data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netPaidAmount) / 100)
|
|
}
|
|
]
|
|
};
|
|
}
|
|
</script>
|