From ead4078079a71bbef43ffc22a7ea7fb0f4039bf0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 28 十一月 2025 17:36:28 +0800
Subject: [PATCH] fix: bug
---
src/views/DataBoard/components/DataBoardCenterChart.vue | 92 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 92 insertions(+), 0 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterChart.vue b/src/views/DataBoard/components/DataBoardCenterChart.vue
new file mode 100644
index 0000000..e89d930
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardCenterChart.vue
@@ -0,0 +1,92 @@
+<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>
--
Gitblit v1.9.1