add product/order chart

src/pages/product/component/ProductSalesTrendChart.vue

@@ -0,0 +1,62 @@
+<template>
+	<gao-chart-card
+		title="产品销售趋势"
+		caption="直接产品与套餐权益分开展示"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="17rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductSalesTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoProductSalesDailyStatView[];
+	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 }
+		},
+		series: [
+			{
+				name: "直接销量",
+				type: "bar",
+				stack: "quantity",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageQuantity))
+			},
+			{
+				name: "订单数",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
+			}
+		]
+	};
+}
+
+</script>