feat: add chart for admin dashbord

web/src/views/admin/Dashboard.vue

@@ -54,26 +54,136 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <el-row class="mgb20" :gutter="20">
+      <el-col :span="8">
+        <div class="e-chart">
+          <div id="chart-users" style="height: 400px"></div>
+          <div class="title">最近7日用户注册</div>
+        </div>
+      </el-col>
+
+      <el-col :span="8">
+        <div class="e-chart">
+          <div id="chart-tokens" style="height: 400px"></div>
+          <div class="title">最近7日Token消耗</div>
+        </div>
+      </el-col>
+
+      <el-col :span="8">
+        <div class="e-chart">
+          <div id="chart-income" style="height: 400px"></div>
+          <div class="title">最近7日收入</div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
 import {ChatDotRound, TrendCharts, User} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
+import * as echarts from 'echarts';
 
 const stats = ref({users: 0, chats: 0, tokens: 0, rewards: 0})
 const loading = ref(true)
 
-httpGet('/api/admin/dashboard/stats').then((res) => {
-  stats.value.users = res.data.users
-  stats.value.chats = res.data.chats
-  stats.value.tokens = res.data.tokens
-  stats.value.income = res.data.income
-  loading.value = false
-}).catch((e) => {
-  ElMessage.error("获取统计数据失败：" + e.message)
+onMounted(() => {
+  const chartUsers = echarts.init(document.getElementById("chart-users"))
+  const chartTokens = echarts.init(document.getElementById("chart-tokens"))
+  const chartIncome = echarts.init(document.getElementById("chart-income"))
+  httpGet('/api/admin/dashboard/stats').then((res) => {
+    stats.value.users = res.data.users
+    stats.value.chats = res.data.chats
+    stats.value.tokens = res.data.tokens
+    stats.value.income = res.data.income
+    const chartData = res.data.chart
+    loading.value = false
+
+    const x = []
+    const dataUsers = []
+    for (let k in chartData.users) {
+      x.push(k)
+      dataUsers.push(chartData.users[k])
+    }
+    chartUsers.setOption({
+      xAxis: {
+        data: x
+      },
+      yAxis: {},
+      series: [
+        {
+          data: dataUsers,
+          type: 'line',
+          label: {
+            show: true,
+            position: 'bottom',
+            textStyle: {
+              fontSize: 18
+            }
+          }
+        }
+      ]
+    })
+    const dataTokens = []
+    for (let k in chartData.historyMessage) {
+      dataTokens.push(chartData.historyMessage[k])
+    }
+    chartTokens.setOption({
+      xAxis: {
+        data: x
+      },
+      yAxis: {},
+      series: [
+        {
+          data: dataTokens,
+          type: 'line',
+          label: {
+            show: true,
+            position: 'bottom',
+            textStyle: {
+              fontSize: 18
+            }
+          }
+        }
+      ]
+    })
+
+    const dataIncome = []
+    for (let k in chartData.orders) {
+      dataIncome.push(chartData.orders[k])
+    }
+    chartIncome.setOption({
+      xAxis: {
+        data: x
+      },
+      yAxis: {},
+      series: [
+        {
+          data: dataIncome,
+          type: 'line',
+          label: {
+            show: true,
+            position: 'bottom',
+            textStyle: {
+              fontSize: 18
+            }
+          }
+        }
+      ]
+    })
+
+  }).catch((e) => {
+    ElMessage.error("获取统计数据失败：" + e.message)
+  })
+
+  window.onresize = function () { // 自适应大小
+    chartUsers.resize()
+    chartTokens.resize()
+    chartIncome.resize()
+  };
 })
 
 </script>
@@ -113,6 +223,14 @@ httpGet('/api/admin/dashboard/stats').then((res) => {
     }
   }
 
+  .e-chart {
+    .title {
+      text-align center
+      font-size 16px
+      color #444444
+    }
+  }
+
   .grid-con-1 .grid-con-icon {
     background: rgb(45, 140, 240);
   }