add 每日新增用户和每日新增支付金额图表

ruoyi-ui/src/api/system/user.js

@@ -133,3 +133,11 @@ export function deptTreeSelect() {
     method: 'get'
   })
 }
+
+// 查询每日新增用户数量
+export function getUserCountByDay() {
+  return request({
+    url: '/system/user/countByDay',
+    method: 'get'
+  })
+}

ruoyi-ui/src/views/index.vue

@@ -2,7 +2,21 @@
   <div class="app-container home">
     <el-row :gutter="20">
       <el-col :sm="24" :lg="24">
-        <h2>南音工作室</h2>
+        <!-- 每日新增用户折线图 -->
+        <el-card style="margin-bottom: 20px;">
+          <div slot="header" class="clearfix">
+            <span>每日新增用户</span>
+          </div>
+          <div ref="userChart" style="height: 400px;"></div>
+        </el-card>
+        
+        <!-- 每日新增支付金额折线图 -->
+        <el-card style="margin-bottom: 20px;">
+          <div slot="header" class="clearfix">
+            <span>每日新增支付金额</span>
+          </div>
+          <div ref="payChart" style="height: 400px;"></div>
+        </el-card>
 <!--        <blockquote class="text-warning" style="font-size: 14px">
           领取阿里云通用云产品1888优惠券
           <br />
@@ -942,18 +956,127 @@
 </template>
 
 <script>
+import { getUserCountByDay } from '@/api/system/user';
+import { getDailyPayAmount } from '@/api/app/payStatistics';
+import * as echarts from 'echarts';
+
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
-      version: "3.8.6"
+      version: "3.8.6",
+      // 用户统计数据
+      userStats: {
+        dates: [],
+        counts: []
+      },
+      // 支付统计数据
+      payStats: {
+        dates: [],
+        amounts: []
+      }
     };
   },
+  mounted() {
+    this.initUserChart();
+    this.initPayChart();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
-    }
+    },
+    // 初始化用户统计图表
+      initUserChart() {
+        // 获取后端数据
+        getUserCountByDay().then(response => {
+          // 解析后端返回的数据
+          const data = response.data || [];
+          this.userStats.dates = data.map(item => item.date);
+          this.userStats.counts = data.map(item => item.count);
+          
+          // 初始化echart实例
+          const userChart = echarts.init(this.$refs.userChart);
+          
+          // 配置图表选项
+          const option = {
+            title: {
+              text: '近30日新增用户趋势'
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: this.userStats.dates
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [{
+              data: this.userStats.counts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {}
+            }]
+          };
+          
+          // 使用配置项显示图表
+          userChart.setOption(option);
+          
+          // 监听窗口大小变化，自适应调整图表大小
+          window.addEventListener('resize', () => userChart.resize());
+        });
+      },
+      // 初始化支付统计图表
+      initPayChart() {
+        // 获取后端数据
+        getDailyPayAmount().then(response => {
+          // 解析后端返回的数据
+          const data = response.data || [];
+          this.payStats.dates = data.map(item => item.date);
+          this.payStats.amounts = data.map(item => item.amount);
+          
+          // 初始化echart实例
+          const payChart = echarts.init(this.$refs.payChart);
+          
+          // 配置图表选项
+          const option = {
+            title: {
+              text: '近30日新增支付金额趋势'
+            },
+            tooltip: {
+              trigger: 'axis',
+              formatter: params => {
+                const value = params[0].value;
+                return `${params[0].axisValue}<br/>${params[0].marker}${value}元`;
+              }
+            },
+            xAxis: {
+              type: 'category',
+              data: this.payStats.dates
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                formatter: value => `${value}元`
+              }
+            },
+            series: [{
+              data: this.payStats.amounts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {}
+            }]
+          };
+          
+          // 使用配置项显示图表
+          payChart.setOption(option);
+          
+          // 监听窗口大小变化，自适应调整图表大小
+          window.addEventListener('resize', () => payChart.resize());
+        });
+      }
   }
 };
 </script>