<template>
	<view style="background-color: #fff;">
		<up-row customStyle="margin-bottom: 10px;">
			<up-col span="6">
				<view style="padding: 40rpx;">
					<up-count-to :startVal="30" :endVal="500.03" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">累计铺货金额</view>
				</view>
			</up-col>
			<up-col span="6">
				<view style="padding: 40rpx;">
					<up-count-to :startVal="30" :endVal="500.03" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">累计销售金额</view>
				</view>
			</up-col>
		</up-row>
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup="ts">
	import {
		ref
	} from 'vue';


	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [{
				min: 0
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	})
	const chartData=ref({
            categories: ["2024"],
            series: [
              {
                name: "手续费",
                data: [35]
              },
			  {
			    name: "保证金",
			    data: [30]
			  },
              {
                name: "损耗金",
                data: [18]
              },
              {
                name: "佣金",
                data: [18]
              }
            ]
          })
</script>

<style>

</style>