From ccd13ce16efd902423c3c72196be16cee0339e5c Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Tue, 3 Sep 2024 20:29:11 +0800
Subject: [PATCH] =?UTF-8?q?```=E5=9C=A8`src/views/money/buy/index.vue`?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=B8=AD=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E4=B8=80=E4=B8=AAECharts=E5=9B=BE=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=E5=B1=95=E7=A4=BA=E5=90=84=E4=B8=AA=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E7=9A=84=E6=B6=88=E8=B4=B9=E6=80=BB=E9=87=91=E9=A2=9D?=
 =?UTF-8?q?=E3=80=82=E9=80=9A=E8=BF=87`echarts`=E5=BA=93=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E5=B9=B6=E9=85=8D=E7=BD=AE=E4=BA=86=E5=9B=BE=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=8C=85=E6=8B=AC=E8=AE=BE=E7=BD=AE=E6=A0=87=E9=A2=98=E3=80=81?=
 =?UTF-8?q?=E5=88=BB=E5=BA=A6=E8=BD=B4=E3=80=81=E6=95=B0=E6=8D=AE=E5=BA=8F?=
 =?UTF-8?q?=E5=88=97=E5=8F=8A=E6=A0=B7=E5=BC=8F=E3=80=82=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=E5=B0=86=E9=9A=8F?=
 =?UTF-8?q?=E7=9D=80`listDate`=E6=95=B0=E6=8D=AE=E6=BA=90=E7=9A=84?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=80=8C=E5=8A=A8=E6=80=81=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E3=80=82=20```?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/money/buy/index.vue | 119 +++++++++++++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 2 deletions(-)

diff --git a/src/views/money/buy/index.vue b/src/views/money/buy/index.vue
index b246023..e87c253 100644
--- a/src/views/money/buy/index.vue
+++ b/src/views/money/buy/index.vue
@@ -73,17 +73,31 @@
       :total="total"
       @pagination="getList"
     />
+
+    <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 * as echarts from 'echarts' //引用echarts
 import { userloginfo } from "@/api/system/user";
 import PanelGroup from "@/views/dashboard/PanelGroup.vue";
 export default {
   components: {PanelGroup},
   data() {
     return {
+      charts: "",
+      opinionData: [], // 数据
+      b: [],
       dateRange: [],
       listDate: [],
       total: 0,
@@ -96,6 +110,9 @@ export default {
   created() {
     this.getList();
   },
+  mounted() {
+    this.drawLine();
+  },
   methods: {
     /** 搜索按钮操作 */
     handleQuery() {
@@ -112,8 +129,106 @@ export default {
       userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
           this.listDate = response.data.rows;
           this.total = response.data.total;
+          this.drawLine();
         }
-      );}
-  }
+      );},
+    drawLine() {
+      // 初始化折线图
+      this.charts = echarts.init(document.getElementById('main'));
+
+      this.b = this.listDate.map(item => item.dataName);
+      this.opinionData = this.listDate.map(item => item.amount);
+
+      // 设置折线图数据和样式
+      this.charts.setOption({
+        title: {
+          left: "3%",
+          top: "5%",
+          text: "各个产品消费的总金额", // 自定义
+        },
+
+        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:this.b
+          // 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>