<template>
	<view class="charts-box">
		<qiun-data-charts type="line" :chartData="chartData" :opts="chartOpts" />
	</view>
</template>

<script>
	export default {
		name: 'InventoryTrend',
		// 接收父组件传入的日期参数（YYYY-mm格式）
		props: {
			chartData: {
				type: Object,
				default: {
					categories: [],
					series: [] // 库存趋势数据
				}
			}
		},
		data() {
			return {
				// 图表配置
				chartOpts: {
					legend: true, // 显示图例
					dataLabel: false, // 不显示数据标签
					xAxis: {
						fontColor: "#666",
						fontSize: 12
					},
					yAxis: {
						fontColor: "#666",
						fontSize: 12,
						gridColor: "#eee"
					},
					color: ["#007aff", "#ff9500", '#22bbff'],
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
	};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
		padding: 16rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}
</style>