add product/order chart

2026-09-06 23:20:26 +08:00
parent 0b01a54eac
commit 9841723177
20 changed files with 2236 additions and 0 deletions
@@ -0,0 +1,81 @@
+<template>
+	<gao-chart-card
+		title="订单每日趋势"
+		caption="金额已换算为元"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		: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 { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "OrderDailyChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoSalesOrderDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		yAxis: [
+			{
+				type: "value",
+				name: "订单",
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "元",
+				axisLabel: {
+					color: "#52607a",
+					formatter: (value: number) => value.toLocaleString("zh-CN")
+				},
+				splitLine: { show: false }
+			}
+		],
+		series: [
+			{
+				name: "订单数",
+				type: "bar",
+				yAxisIndex: 0,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
+			},
+			{
+				name: "成交金额",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.saleAmount) / 100)
+			},
+			{
+				name: "净收款",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netPaidAmount) / 100)
+			}
+		]
+	};
+}
+
+</script>