39 lines
827 B
Vue
39 lines
827 B
Vue
<template>
|
|
<div class="art-card h-105 p-4 box-border mb-5 max-sm:mb-4">
|
|
<div class="art-card-header">
|
|
<div class="title">
|
|
<h4>{{ $t('console.activeUser.title') }}</h4>
|
|
</div>
|
|
</div>
|
|
<ArtBarChart
|
|
class="box-border p-2"
|
|
barWidth="50%"
|
|
height="calc(100% - 40px)"
|
|
:showAxisLine="false"
|
|
:data="yData"
|
|
:xAxisData="xData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { fetchRechargeBarChart } from '@/api/dashboard'
|
|
|
|
/**
|
|
* 充值金额数据
|
|
*/
|
|
const yData = ref<number[]>([])
|
|
|
|
/**
|
|
* 月份数据
|
|
*/
|
|
const xData = ref<string[]>([])
|
|
|
|
onMounted(async () => {
|
|
fetchRechargeBarChart().then((data: any) => {
|
|
yData.value = data?.recharge_amount ?? []
|
|
xData.value = data?.recharge_month ?? []
|
|
})
|
|
})
|
|
</script>
|