Merge remote-tracking branch 'origin/master'

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>