<template>
|
<div class="data-board-center-chart">
|
<div class="data-board-center-chart-item">
|
<div class="data-board-center-chart-item-title">新增发放额</div>
|
<div class="data-board-center-chart-item-chart">
|
<v-chart :option="newBountyReleaseAmountOption" />
|
</div>
|
</div>
|
<div class="data-board-center-chart-item right">
|
<div class="data-board-center-chart-item-title">新增使用额</div>
|
<div class="data-board-center-chart-item-chart">
|
<v-chart :option="newBountyUseAmountCountOption" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import 'echarts';
|
import vChart from 'vue-echarts';
|
import { createNewBountyReleaseAmountChartOptions } from '../utils';
|
import {
|
useGetDataBoardNewBountyReleaseAmountCount,
|
useGetDataBoardNewBountyUseAmountCount,
|
} from '../hooks';
|
|
defineOptions({
|
name: 'DataBoardCenterChart',
|
});
|
|
const { detail: newBountyReleaseAmountCount } = useGetDataBoardNewBountyReleaseAmountCount();
|
const { detail: newBountyUseAmountCount } = useGetDataBoardNewBountyUseAmountCount();
|
|
const newBountyReleaseAmountOption = computed(() =>
|
createNewBountyReleaseAmountChartOptions({
|
data: [
|
newBountyReleaseAmountCount.value.lastMonthData,
|
newBountyReleaseAmountCount.value.currentMonthData,
|
],
|
xAxisData: newBountyReleaseAmountCount.value.x,
|
name: ['上月', '本月'],
|
color: ['#00A6FF', '#FECD07'],
|
})
|
);
|
|
const newBountyUseAmountCountOption = computed(() =>
|
createNewBountyReleaseAmountChartOptions({
|
data: [
|
newBountyUseAmountCount.value.lastMonthData,
|
newBountyUseAmountCount.value.currentMonthData,
|
],
|
xAxisData: newBountyUseAmountCount.value.x,
|
name: ['上月', '本月'],
|
color: ['#00A6FF', '#FECD07'],
|
})
|
);
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.data-board-center-chart {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
padding: 35px 20px;
|
height: 292px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/dataBoard/data-board-center-chart-bg.png');
|
|
.data-board-center-chart-item {
|
&.right {
|
margin-left: 20px;
|
}
|
|
.data-board-center-chart-item-title {
|
margin-bottom: 20px;
|
font-size: 22px;
|
font-family: YouSheBiaoTiHei Regular;
|
text-align: center;
|
background: linear-gradient(to bottom, #ffffff, #98ecff);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.data-board-center-chart-item-chart {
|
width: 100%;
|
height: 200px;
|
}
|
}
|
}
|
</style>
|
