add product/order chart

src/pages/product/component/ProductStockMovementChart.vue

@@ -0,0 +1,70 @@
+<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 { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "ProductStockMovementChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoProductStockMovementDailyStatView[];
+	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",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.inQuantity))
+			},
+			{
+				name: "出库",
+				type: "bar",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.outQuantity))
+			},
+			{
+				name: "库存净变化",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netOnHandQuantity))
+			},
+			{
+				name: "新增预占",
+				type: "line",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.reserveQuantity))
+			},
+			{
+				name: "释放预占",
+				type: "line",
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.releaseQuantity))
+			}
+		]
+	};
+}
+
+</script>