From 78064468c18cc3ac8713b03479e46fb58ac719a4 Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Mon, 26 Aug 2024 15:01:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(user-view):=20=E6=96=B0=E5=A2=9E=E8=BF=911?=
 =?UTF-8?q?2=E6=9C=88=E6=B6=88=E8=B4=B9=E8=B6=8B=E5=8A=BF=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在用户余额页面下方添加了一个图表，展示用户近12个月的消费趋势。使用ECharts库初始化图表并设置选项，包括标题、工具提示、图例、网格、工具箱等。消费金额数据和月份标签已硬编码，需根据实际后端数据进行动态更新。

引入了echarts库并更新了相关代码，确保图表能在页面加载时正确显示。此更新旨在提供给用户更直观的消费反馈，帮助用户更好地了解自己的消费模式。

BREAKING CHANGE: 引入了ECharts库的新版本5.5.1，可能会与现有的样式或依赖产生冲突。需要在项目中进行详细的测试，确保没有引入新的问题。
---
 package.json                   |   2 +-
 src/views/money/user/index.vue | 110 ++++++++++++++++++++++++++++++++-
 2 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 1aa9f70..829f7bb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
-    "echarts": "5.4.0",
+    "echarts": "^5.5.1",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
diff --git a/src/views/money/user/index.vue b/src/views/money/user/index.vue
index aa0fac9..32f9b2a 100644
--- a/src/views/money/user/index.vue
+++ b/src/views/money/user/index.vue
@@ -5,15 +5,27 @@
       <p>余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
       <el-button type="primary" @click="navigateToRecharge">充值</el-button>
     </el-card>
+
+
+    <el-card style="margin-top: 50px">
+      <div>
+        <!-- 装ECharts的容器 -->
+        <div id="main" style="width: 100%; height: 520px; background: #fff">
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
 import { userBalance } from "@/api/system/user"; //
+import * as echarts from 'echarts' //引用echarts
 
 export default {
   data() {
     return {
+      charts: "",
+      opinionData: ["155", "400", "900", "800", "300", "900", "270", "684", "165", "0", "300", "150"], // 数据
       userBalanceData: {
         userBalance: '加载中...'
       }
@@ -22,6 +34,9 @@ export default {
   created() {
     this.fetchUserBalance();
   },
+  mounted() {
+    this.drawLine();
+  },
   methods: {
     navigateToRecharge() {
       this.$router.push('/money/zfb');
@@ -37,7 +52,7 @@ export default {
         const response = await userBalance(userId);
         if (response.data) {
           console.log(response.data)
-          this.userBalanceData.userBalance = response.data; // 假设response.data直接返回了余额信息
+          this.userBalanceData.userBalance = response.data;
         } else {
           this.userBalanceData.userBalance = {userBalance: '获取失败'};
         }
@@ -46,6 +61,99 @@ export default {
         console.error('Error fetching user balance:', error);
       }
     },
+    drawLine() {
+      // 初始化折线图
+      this.charts = echarts.init(document.getElementById('main'));
+
+      // 设置折线图数据和样式
+      this.charts.setOption({
+        title: {
+          left: "3%",
+          top: "5%",
+          text: "近12月消费趋势", // 自定义
+        },
+
+        tooltip: {
+          trigger: "axis",
+        },
+
+        legend: {
+          align: "right",
+          left: "3%",
+          top: "15%",
+          data: ["消费金额"], // 自定义
+        },
+
+        grid: {
+          top: "30%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+
+        // 自定义：设置x轴刻度
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          // 自定义标签
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+        },
+
+        // 自定义：设置y轴刻度
+        yAxis: {
+          type: "value",
+          boundaryGap: true,
+          splitNumber: 4,
+          interval: 250,
+        },
+
+        // 设置数据
+        series: [
+          {
+            name: "消费金额", // 自定义
+            type: "line",
+            stack: "总量", // 自定义
+            data: this.opinionData, // 自定义
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgb(255,200,213)",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ],
+                global: false,
+              },
+            },
+            itemStyle: {
+              color: "rgb(255,96,64)",
+              lineStyle: {
+                color: "rgb(255,96,64)",
+              },
+            },
+          },
+        ],
+      });
+    },
   },
 };
 </script>