chore: 优化报表分析页面样式

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

@@ -39,10 +39,9 @@ const genderOption = computed(() => {
     yAxis: {
       data: ['男性', '女性'],
       inverse: true,
-      axisLine: { show: true },
+      axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
-        fontSize: 14,
         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)) + '%'
@@ -59,9 +58,9 @@ const genderOption = computed(() => {
       {
         type: 'pictorialBar',
         symbolRepeat: true,
-        symbolSize: ['18', '36'],
+        symbolSize: ['14', '28'],
         symbolOffset: [20, 0],
-        symbolMargin: 20,
+        symbolMargin: 10,
         data: [
           { value: gender.value[1], symbol: man, itemStyle: { color: '#767aca' } },
           { value: gender.value[2], symbol: woman, itemStyle: { color: '#d26080' } }
@@ -93,6 +92,7 @@ const ageOption = computed(() => {
         itemStyle: {
           borderRadius: 6
         },
+        radius: [0, '45%'],
         data: age.value
       }
     ]
@@ -109,11 +109,17 @@ onMounted(fetchCardLevel)
 
 const levelOption = computed(() => {
   return {
+    grid: {
+      left: '20%',
+      right: '10%'
+      // bottom: '10%'
+    },
     tooltip: {
       trigger: 'axis'
     },
     xAxis: {
       type: 'category',
+      axisLabel: { interval: 0, rotate: 30 },
       data: cardLevel.value.map(item => item.group_name)
     },
     yAxis: {
@@ -147,7 +153,7 @@ const monthlyOption = computed(() => {
     series: [
       {
         type: 'pie',
-        radius: ['55%', '75%'],
+        radius: ['30%', '45%'],
         itemStyle: {
           borderRadius: 6
         },
@@ -371,11 +377,11 @@ onMounted(fetchCardInstallment)
           <h3>信用卡开卡</h3>
           <div class="card">
             <div class="item" v-for="(item, index) in cardOpen" :key="index">
-              <div class="item-left">{{ item.group_name }}</div>
+              <!-- <div class="item-left">{{ item.group_name }}</div> -->
               <div class="item-center">
                 <p v-if="index === 0">总转换率 {{ item.rate }}%</p>
                 <p v-else>{{ item.rate }}%</p>
-                <div class="circle"></div>
+                <div class="circle">{{ item.group_name }}</div>
               </div>
               <div class="item-right">{{ item.total }}人</div>
             </div>
@@ -385,11 +391,11 @@ onMounted(fetchCardInstallment)
           <h3>积分翻倍及消费满减</h3>
           <div class="card">
             <div class="item" v-for="(item, index) in cardIntegral" :key="index">
-              <div class="item-left">{{ item.group_name }}</div>
+              <!-- <div class="item-left">{{ item.group_name }}</div> -->
               <div class="item-center">
                 <p v-if="index === 0">总转换率 {{ item.rate }}%</p>
                 <p v-else>{{ item.rate }}%</p>
-                <div class="circle"></div>
+                <div class="circle">{{ item.group_name }}</div>
               </div>
               <div class="item-right">{{ item.total }}人</div>
             </div>
@@ -399,11 +405,11 @@ onMounted(fetchCardInstallment)
           <h3>分期还款</h3>
           <div class="card">
             <div class="item" v-for="(item, index) in cardInstallment" :key="index">
-              <div class="item-left">{{ item.group_name }}</div>
+              <!-- <div class="item-left">{{ item.group_name }}</div> -->
               <div class="item-center">
                 <p v-if="index === 0">总转换率 {{ item.rate }}%</p>
                 <p v-else>{{ item.rate }}%</p>
-                <div class="circle"></div>
+                <div class="circle">{{ item.group_name }}</div>
               </div>
               <div class="item-right">{{ item.total }}人</div>
             </div>
@@ -426,7 +432,7 @@ onMounted(fetchCardInstallment)
   h3 {
     padding: 10px;
     font-size: 16px;
-    color: #000;
+    color: rgba(0, 0, 0, 0.8);
     line-height: 30px;
     text-align: center;
   }
@@ -439,7 +445,7 @@ onMounted(fetchCardInstallment)
   }
   .box {
     flex: 1;
-    background-color: #eaeaea;
+    background-color: rgba(234, 234, 234, 0.6);
     border-radius: 6px;
     overflow: hidden;
   }
@@ -463,12 +469,18 @@ onMounted(fetchCardInstallment)
     }
     .item-center {
       position: relative;
-      margin: 40px 10px 0;
+      margin: 40px 0 0;
       flex: 1;
       height: 40px;
       .circle {
         width: 100%;
         height: 100%;
+        font-size: 12px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
         background-color: #1b41a0;
       }
       p {
@@ -505,7 +517,6 @@ onMounted(fetchCardInstallment)
       }
     }
     .item-right {
-      padding: 0 10px;
       font-size: 14px;
       color: #999;
       text-align: right;