chore: 优化图表

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

@@ -16,12 +16,17 @@ async function fetchInfo() {
 onMounted(fetchInfo)
 
 // 用户性别分布
-const gender = ref({ 1: 0, 2: 0 })
+const gender = reactive({ 1: 0, 2: 0 })
+const userTotal = ref(0)
 async function fetchGender() {
   const res = await api.getMemberGender()
-  gender.value = res.data.items.reduce((result, item) => {
+  userTotal.value = res.data.total
+  Object.assign(
+    gender,
+    res.data.items.reduce((result, item) => {
       return { ...result, [item.group_name]: parseInt(item.total) }
     }, {})
+  )
 }
 onMounted(fetchGender)
 
@@ -43,8 +48,8 @@ const genderOption = computed(() => {
       axisTick: { show: false },
       axisLabel: {
         formatter: function (value, index) {
-          const total = gender.value[1] + gender.value[2]
-          return value + '\n' + (index === 0 ? ((gender.value[1] / total) * 100).toFixed(1) : ((gender.value[2] / total) * 100).toFixed(1)) + '%'
+          const total = gender[1] + gender[2]
+          return value + '\n' + (index === 0 ? ((gender[1] / total) * 100).toFixed(1) : ((gender[2] / total) * 100).toFixed(1)) + '%'
         }
       }
     },
@@ -62,8 +67,8 @@ const genderOption = computed(() => {
         symbolOffset: [20, 0],
         symbolMargin: 10,
         data: [
-          { value: gender.value[1], symbol: man, itemStyle: { color: '#767aca' } },
-          { value: gender.value[2], symbol: woman, itemStyle: { color: '#d26080' } }
+          { value: gender[1], symbol: man, itemStyle: { color: '#767aca' } },
+          { value: gender[2], symbol: woman, itemStyle: { color: '#d26080' } }
         ]
       }
     ]
@@ -339,25 +344,29 @@ onMounted(fetchCardInstallment)
         <div class="box">
           <h3>用户性别分布</h3>
           <div class="box-inner">
-            <v-chart class="chart" :option="genderOption" ref="chart" style="height: 280px" />
+            <v-chart class="chart" :option="genderOption" ref="chart" style="height: 280px" v-if="userTotal" />
+            <el-empty v-else />
           </div>
         </div>
         <div class="box">
           <h3>用户年龄分布</h3>
           <div class="box-inner">
-            <v-chart class="chart" :option="ageOption" ref="chart" style="height: 280px" />
+            <v-chart class="chart" :option="ageOption" ref="chart" style="height: 280px" v-if="age.length" />
+            <el-empty v-else />
           </div>
         </div>
         <div class="box">
           <h3>信用卡级别分布</h3>
           <div class="box-inner">
-            <v-chart class="chart" :option="levelOption" ref="chart" style="height: 280px" />
+            <v-chart class="chart" :option="levelOption" ref="chart" style="height: 280px" v-if="cardLevel.length" />
+            <el-empty v-else />
           </div>
         </div>
         <div class="box">
           <h3>月收入分布</h3>
           <div class="box-inner">
-            <v-chart class="chart" :option="monthlyOption" ref="chart" style="height: 280px" />
+            <v-chart class="chart" :option="monthlyOption" ref="chart" style="height: 280px" v-if="monthly.length" />
+            <el-empty v-else />
           </div>
         </div>
       </div>
@@ -385,7 +394,8 @@ onMounted(fetchCardInstallment)
         <div class="box">
           <h3>事件分析</h3>
           <div class="box-inner">
-            <v-chart class="chart" :option="eventOption" ref="chart" style="height: 380px" />
+            <v-chart class="chart" :option="eventOption" ref="chart" style="height: 380px" v-if="event.length" />
+            <el-empty v-else />
           </div>
         </div>
       </div>
@@ -393,6 +403,7 @@ onMounted(fetchCardInstallment)
         <div class="box">
           <h3>信用卡开卡</h3>
           <div class="card">
+            <template v-if="cardOpen.length">
               <div class="item" v-for="(item, index) in cardOpen" :key="index">
                 <!-- <div class="item-left">{{ item.group_name }}</div> -->
                 <div class="item-center">
@@ -402,11 +413,14 @@ onMounted(fetchCardInstallment)
                 </div>
                 <div class="item-right">{{ item.total }}人</div>
               </div>
+            </template>
+            <el-empty v-else />
           </div>
         </div>
         <div class="box">
           <h3>积分翻倍及消费满减</h3>
           <div class="card">
+            <template v-if="cardIntegral.length">
               <div class="item" v-for="(item, index) in cardIntegral" :key="index">
                 <!-- <div class="item-left">{{ item.group_name }}</div> -->
                 <div class="item-center">
@@ -416,11 +430,14 @@ onMounted(fetchCardInstallment)
                 </div>
                 <div class="item-right">{{ item.total }}人</div>
               </div>
+            </template>
+            <el-empty v-else />
           </div>
         </div>
         <div class="box">
           <h3>分期还款</h3>
           <div class="card">
+            <template v-if="cardInstallment.length">
               <div class="item" v-for="(item, index) in cardInstallment" :key="index">
                 <!-- <div class="item-left">{{ item.group_name }}</div> -->
                 <div class="item-center">
@@ -430,6 +447,8 @@ onMounted(fetchCardInstallment)
                 </div>
                 <div class="item-right">{{ item.total }}人</div>
               </div>
+            </template>
+            <el-empty v-else />
           </div>
         </div>
       </div>