chore: 优化报表分析

src/modules/analyze/user/views/Index.vue

@@ -83,12 +83,13 @@ onMounted(fetchAge)
 const ageOption = computed(() => {
   return {
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
+      formatter: '{b}: {c}<br />{d}%'
     },
     series: [
       {
         type: 'pie',
-        label: { formatter: '{b}\n{c}' },
+        label: { formatter: '{b}\n{d}%' },
         itemStyle: {
           borderRadius: 6
         },
@@ -129,6 +130,11 @@ const levelOption = computed(() => {
       {
         name: '数据',
         type: 'bar',
+        label: {
+          show: true,
+          position: 'top'
+        },
+        itemStyle: { borderRadius: 2 },
         data: cardLevel.value.map(item => item.total)
       }
     ]
@@ -148,7 +154,8 @@ onMounted(fetchMonthly)
 const monthlyOption = computed(() => {
   return {
     tooltip: {
-      trigger: 'item'
+      trigger: 'item',
+      formatter: '{b}: {c}<br />{d}%'
     },
     series: [
       {
@@ -158,7 +165,7 @@ const monthlyOption = computed(() => {
           borderRadius: 6
         },
         label: {
-          formatter: '{b}\n{c}'
+          formatter: '{b}\n{d}%'
         },
         data: monthly.value
       }
@@ -278,7 +285,7 @@ async function fetchCardOpen() {
     if (index === 0) {
       rate = ((items[items.length - 1]?.total / item.total) * 100).toFixed(2)
     } else {
-      rate = (((items[index + 1]?.total || 0) / item.total) * 100).toFixed(2)
+      rate = ((item.total / (items[index - 1]?.total || 0)) * 100).toFixed(2)
     }
     return { ...item, rate }
   })
@@ -295,7 +302,7 @@ async function fetchCardIntegral() {
     if (index === 0) {
       rate = ((items[items.length - 1]?.total / item.total) * 100).toFixed(2)
     } else {
-      rate = (((items[index + 1]?.total || 0) / item.total) * 100).toFixed(2)
+      rate = ((item.total / (items[index - 1]?.total || 0)) * 100).toFixed(2)
     }
     return { ...item, rate }
   })
@@ -312,7 +319,7 @@ async function fetchCardInstallment() {
     if (index === 0) {
       rate = ((items[items.length - 1]?.total / item.total) * 100).toFixed(2)
     } else {
-      rate = (((items[index + 1]?.total || 0) / item.total) * 100).toFixed(2)
+      rate = ((item.total / (items[index - 1]?.total || 0)) * 100).toFixed(2)
     }
     return { ...item, rate }
   })
@@ -331,19 +338,27 @@ onMounted(fetchCardInstallment)
       <div class="row">
         <div class="box">
           <h3>用户性别分布</h3>
-          <v-chart class="chart" :option="genderOption" ref="chart" style="height: 280px" />
+          <div class="box-inner">
+            <v-chart class="chart" :option="genderOption" ref="chart" style="height: 280px" />
+          </div>
         </div>
         <div class="box">
           <h3>用户年龄分布</h3>
-          <v-chart class="chart" :option="ageOption" ref="chart" style="height: 280px" />
+          <div class="box-inner">
+            <v-chart class="chart" :option="ageOption" ref="chart" style="height: 280px" />
+          </div>
         </div>
         <div class="box">
           <h3>信用卡级别分布</h3>
-          <v-chart class="chart" :option="levelOption" ref="chart" style="height: 280px" />
+          <div class="box-inner">
+            <v-chart class="chart" :option="levelOption" ref="chart" style="height: 280px" />
+          </div>
         </div>
         <div class="box">
           <h3>月收入分布</h3>
-          <v-chart class="chart" :option="monthlyOption" ref="chart" style="height: 280px" />
+          <div class="box-inner">
+            <v-chart class="chart" :option="monthlyOption" ref="chart" style="height: 280px" />
+          </div>
         </div>
       </div>
     </div>
@@ -369,7 +384,9 @@ onMounted(fetchCardInstallment)
       <div class="row">
         <div class="box">
           <h3>事件分析</h3>
-          <v-chart class="chart" :option="eventOption" ref="chart" style="height: 380px" />
+          <div class="box-inner">
+            <v-chart class="chart" :option="eventOption" ref="chart" style="height: 380px" />
+          </div>
         </div>
       </div>
       <div class="row">
@@ -449,12 +466,18 @@ onMounted(fetchCardInstallment)
     border-radius: 6px;
     overflow: hidden;
   }
+  .box-inner {
+    background-color: #fff;
+    margin: 0 20px 20px;
+    border-radius: 4px;
+  }
 }
 .card {
-  margin: 20px;
+  margin: 0 20px 20px;
   background-color: #fff;
   padding: 20px;
   min-height: 410px;
+  border-radius: 4px;
   .item {
     min-height: 40px;
     display: flex;