100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
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="500.03" 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="500.03" 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="500.03" 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="500.03" 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';
|
|
|
|
|
|
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: [8]
|
|
},
|
|
{
|
|
name: "队长",
|
|
data: [16]
|
|
},
|
|
{
|
|
name: "厨师",
|
|
data: [18]
|
|
}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |