修改统计

src/stores/statistics/statistics.ts

@@ -19,11 +19,17 @@ export const StatisticsStore = defineStore('statistics', () => {
     const res = await axios.$get(`${api.url}/order`, cond);
     return res;
   };
+  const user = async (): Promise<IQueryResult> => {
+    const cond: IQueryType = {};
+    const res = await axios.$get(`${api.url}/user`, cond);
+    return res;
+  };
   return {
     count,
     doubleCount,
     increment,
     order,
+    user,
     fetch
   };
 });

src/views/home/index.vue

@@ -2,8 +2,11 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
-          <div id="myChart" :style="{ width: '600px', height: '600px' }"></div>
+        <el-col :span="12" class="one">
+          <div id="myChart1" :style="{ width: '600px', height: '600px' }"></div>
+        </el-col>
+        <el-col :span="12" class="two">
+          <div id="myChart2" :style="{ width: '600px', height: '600px' }"></div>
         </el-col>
       </el-col>
     </el-row>
@@ -22,7 +25,7 @@ const statisticsAxios = StatisticsStore();
 const { proxy } = getCurrentInstance() as any;
 // 加载中
 const loading: Ref<any> = ref(false);
-const option: Ref<any> = ref({
+const option1: Ref<any> = ref({
   title: {
     text: '每月订单数量统计',
     left: 'center'
@@ -51,6 +54,40 @@ const option: Ref<any> = ref({
     }
   ]
 });
+const option2: Ref<any> = ref({
+  title: {
+    text: '每个月注册人数'
+  },
+  grid: {
+    top: '10%',
+    left: '2%',
+    right: '4%',
+    bottom: '0%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      axisTick: {
+        alignWithLabel: true
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value'
+    }
+  ],
+  series: [
+    {
+      name: '每个月申请人数',
+      type: 'bar',
+      barWidth: '40%',
+      data: []
+    }
+  ]
+});
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -59,13 +96,23 @@ onMounted(async () => {
   loading.value = false;
 });
 const search = async () => {
-  let res: IQueryResult = await statisticsAxios.order();
-  if (res.errcode == 0) option.value.series[0].data = res.data;
+  let res: IQueryResult;
+  res = await statisticsAxios.order();
+  if (res.errcode == 0) option1.value.series[0].data = res.data;
+  res = await statisticsAxios.user();
+  if (res.errcode == 0) option2.value.series[0].data = res.data;
 };
 const initeCharts = () => {
-  let myChart = echarts.init(document.getElementById('myChart'));
+  let myChart1 = echarts.init(document.getElementById('myChart1'));
+  // 绘制图表
+  myChart1.setOption(option1.value);
+  let myChart2 = echarts.init(document.getElementById('myChart2'));
   // 绘制图表
-  myChart.setOption(option.value);
+  myChart2.setOption(option2.value);
 };
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  display: flex;
+}
+</style>