You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
5.7 KiB
210 lines
5.7 KiB
<template>
|
|
<view style="min-height: 100vh;">
|
|
<view class="padding-xs">
|
|
<view class="border-bottom bg-linear padding" style="height: 34vh;">
|
|
<view class="padding text-center ">
|
|
<view class="padding-top-xl">
|
|
<view>{{languageData.echarts.total}}（₭）</view>
|
|
<view class="text-sl">9822133.00</view>
|
|
</view>
|
|
</view>
|
|
<view class="border-bottom margin-top-sm padding">
|
|
<view class="disply-center text-center">
|
|
<view class="">
|
|
<view class="">{{languageData.echarts.numberOfPayers}}</view>
|
|
<view class="">321</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="">{{languageData.echarts.PaymentOrder}}</view>
|
|
<view class="">121</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="">{{languageData.echarts.paySuccess}}</view>
|
|
<view class="">2112</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="border-bottom bg-linear-radius margin-top-sm padding" style="border-radius: 10rpx;">
|
|
<view class="text-sm">
|
|
<view class="disply-center">
|
|
<view class="bg-linear-data margin-sm">
|
|
<view class="margin-sm">
|
|
<view class="disply-center text-xs">
|
|
<view class="">{{languageData.echarts.income}}</view>
|
|
<view class="fr disply-center">
|
|
<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
|
|
<u-icon name="arrow-right" color="#7ca3ff" size="11" />
|
|
</view>
|
|
</view>
|
|
<view class="margin-xs text-df">₭42321</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-linear-data margin-sm">
|
|
<view class="margin-sm">
|
|
<view class="disply-center text-xs">
|
|
<view class="">{{languageData.echarts.withdrawal}}</view>
|
|
<view class="fr disply-center">
|
|
<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
|
|
<u-icon name="arrow-right" color="#7ca3ff" size="11" />
|
|
</view>
|
|
</view>
|
|
<view class="margin-xs text-df">₭2321</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="disply-center">
|
|
<view class="bg-linear-data margin-sm">
|
|
<view class="margin-sm">
|
|
<view class="disply-center text-xs">
|
|
<view class="">{{languageData.echarts.points}}</view>
|
|
<view class="fr disply-center">
|
|
<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
|
|
<u-icon name="arrow-right" color="#7ca3ff" size="11" />
|
|
</view>
|
|
</view>
|
|
<view class="margin-xs text-df">812321</view>
|
|
</view>
|
|
</view>
|
|
<view class="bg-linear-data margin-sm">
|
|
<view class="margin-sm">
|
|
<view class="disply-center text-xs">
|
|
<view class="">{{languageData.echarts.withdrawable}}</view>
|
|
<view class="fr disply-center">
|
|
<view class="padding-right-xs">{{languageData.echarts.detail}}</view>
|
|
<u-icon name="arrow-right" color="#7ca3ff" size="11" />
|
|
</view>
|
|
</view>
|
|
<view class="margin-xs text-df">₭1000</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 图表 -->
|
|
<view class="border-bottom bg-white margin-top-sm padding" style="border-radius: 10rpx;">
|
|
<!-- <div ref="main" style="width: 500px;height:250px;"></div> -->
|
|
<qiun-data-charts type="line" :opts="opts('交易额', '#FC8452')" :chartData="chartData" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Dashboard',
|
|
data() {
|
|
return {
|
|
chartData: {},
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.languageData = this.$languageData;
|
|
},
|
|
mounted() {
|
|
this.getServerData();
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
//模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
let res = {
|
|
categories: [this.languageData.echarts.Mon,
|
|
this.languageData.echarts.Tue,
|
|
this.languageData.echarts.Wed,
|
|
this.languageData.echarts.Thu,
|
|
this.languageData.echarts.Fri,
|
|
this.languageData.echarts.Sat,
|
|
this.languageData.echarts.Sun
|
|
],
|
|
series: [{
|
|
name: this.languageData.echarts.person,
|
|
lineType: "dash",
|
|
data: [35, 8, 25, 37, 4, 20, 30]
|
|
},
|
|
{
|
|
name: this.languageData.echarts.merchant,
|
|
data: [70, 40, 65, 60, 44, 68, 80]
|
|
},
|
|
{
|
|
name: this.languageData.echarts.agent,
|
|
data: [100, 80, 95, 100, 112, 132, 140]
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
}, 500)
|
|
},
|
|
opts(title, color) {
|
|
let opts = {
|
|
color: [color],
|
|
padding: [15, 10, 0, 15],
|
|
dataLabel: true,
|
|
dataPointShape: true,
|
|
dataPointShapeType: 'hollow',
|
|
fontSize: 10,
|
|
legend: {},
|
|
xAxis: {
|
|
rotateLabel: true,
|
|
disableGrid: true,
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
showTitle: false,
|
|
dashLength: 16,
|
|
disabled: true,
|
|
data: [{
|
|
min: 0,
|
|
calibration: true,
|
|
fontColor: color,
|
|
position: "left",
|
|
title: title,
|
|
tofix: 2
|
|
}]
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: "curve",
|
|
width: 2,
|
|
activeType: "hollow",
|
|
linearType: "custom",
|
|
onShadow: true,
|
|
animation: "horizontal"
|
|
}
|
|
},
|
|
}
|
|
return opts;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg-linear {
|
|
background: linear-gradient(135deg, #1aaeff, #3775ff);
|
|
color: white;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.bg-linear-radius {
|
|
background: linear-gradient(135deg, #ffffff, #9acbf3);
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.bg-linear-data {
|
|
background: linear-gradient(135deg, #ffffff, #9acbf3);
|
|
border-radius: 10rpx;
|
|
height: 100rpx;
|
|
width: 50%;
|
|
}
|
|
|
|
.disply-center {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|