purchase-let/pagesOrder/statistics/index.vue

<template>
	<view style="background-color: #fff;">
		<up-row customStyle="margin-bottom: 10px;">
			<up-col span="6">
				<view style="padding: 30rpx 40rpx 0 40rpx;">
					<up-count-to :startVal="30" :endVal="data.total_price" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">累计铺货金额</view>
				</view>
			</up-col>
			<up-col span="6">
				<view style="padding: 30rpx 40rpx 0 40rpx;">
					<up-count-to :startVal="30" :endVal="data.pay_price" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">累计销售金额</view>
				</view>
			</up-col>
		</up-row>
		<up-row customStyle="margin-bottom: 10px;">
			<up-col span="6">
				<view style="padding: 30rpx 40rpx 0 40rpx;">
					<up-count-to :startVal="30" :endVal="data.expenditure" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">总支出</view>
				</view>
			</up-col>
			<up-col span="6">
				<view style="padding: 30rpx 40rpx 0 40rpx;">
					<up-count-to :startVal="30" :endVal="data.store_money" fontSize="40" decimals="2"></up-count-to>
					<view style="padding: 20rpx;">利润</view>
				</view>
			</up-col>
		</up-row>
		<view>
			<span style="font-size: 20px;padding: 10rpx;">支出明细</span>
			<up-divider></up-divider>
		</view>
		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup="ts">
	import {
		ref
	} from 'vue';
	import {
		store_statistics,
	} from "@/api/store.js"
	const data = ref({
		total_price: 0,
		pay_price: 0,
		store_money:0,
		commission: 0,
		bond: 0,
		village: 0,
		vip: 0,
		brigade: 0,
		attrition: 0
	})
	const getLists = () => {
		store_statistics().then(res => {
			data.value = res.data
			chartData.value.series=res.data.list

		})
	}
	getLists()
	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",
				seriesGap:30,
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	})
	const chartData = ref({
		categories: [""],
		series: [{
				name: "手续费",
				data: [0]
			},
			{
				name: "保证金",
				data: [0]
			},
			{
				name: "损耗金",
				data: [0]
			},
			{
				name: "村长",
				data: [0]
			},
			{
				name: "队长",
				data: [0]
			},
			{
				name: "厨师",
				data: [0]
			}
		]
	})
</script>

<style>

</style>