74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<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> |