完善页面7

components/analytics/AnalyticsUserGenderSection.uvue

@@ -5,24 +5,20 @@
     </view>
     
     <view class="card-content">
-      <!-- 左侧自定义图例列 - 复刻 CRMEB 竖排样式 -->
+      <!-- 上部/左部图例区 - 复刻新图样式 (stacked) -->
       <view class="legend-col">
-        <view class="legend-item" v-for="(item, index) in genderData" :key="index">
-          <view class="legend-dot" :style="{ backgroundColor: item.itemStyle.color }"></view>
-          <text class="legend-label">{{ item.name }}</text>
+        <view class="legend-item" v-for="(item, index) in (genderData as UTSJSONObject[])" :key="index">
+          <view class="legend-dot" :style="{ backgroundColor: (item['itemStyle'] as UTSJSONObject)['color'] as string }"></view>
+          <text class="legend-label">{{ item['name'] }}</text>
         </view>
       </view>
 
-      <!-- 
-        右侧图表列 - 核心容器
-        1. 使用 ResizeObserver 监听此处尺寸
-        2. 中心文字通过 CSS 绝对居中
-      -->
+      <!-- 下部图表区 - 核心容器 -->
       <view class="chart-col" ref="chartWrapRef">
         <!-- 图表组件 -->
         <EChartsView :option="chartOption" class="donut-chart" />
         
-        <!-- 中心文字：绝对居中，与 ECharts center:['50%','50%'] 严格同步 -->
+        <!-- 中心文字：绝对居中 -->
         <view class="center-text">
           <text class="total-label">总用户数</text>
           <text class="total-value">{{ totalUsers }}</text>
@@ -46,11 +42,11 @@ export default {
   },
   data() {
     return {
-      totalUsers: 525,
+      totalUsers: 789,
       genderData: [
-        { value: 450, name: '未知', itemStyle: { color: '#919eab' } },
-        { value: 50, name: '男', itemStyle: { color: '#1890ff' } },
-        { value: 25, name: '女', itemStyle: { color: '#febc2c' } }
+        { value: 400, name: '男', itemStyle: { color: '#1890ff' } },
+        { value: 300, name: '女', itemStyle: { color: '#febc2c' } },
+        { value: 89, name: '未知', itemStyle: { color: '#919eab' } }
       ],
       chartOption: {} as any,
       resizeObserver: null as any | null
@@ -68,8 +64,12 @@ export default {
     }
   },
   mounted() {
-    this.initChart()
     this.setupResizeSystem()
+    
+    // 📌 参考 AnalyticsPieChart 的延迟初始化策略，解决 H5 渲染 0 宽高问题
+    setTimeout(() => {
+      this.initChart()
+    }, 300)
   },
   unmounted() {
     if (this.resizeObserver != null) {
@@ -84,7 +84,16 @@ export default {
   },
   methods: {
     initChart() {
-      // Step 4: 修复 option 自适应，使用百分比 radius 和 center
+      // 📌 参考 AnalyticsPieChart 的数据映射和 PlainObject 处理
+      const plainData = (this.genderData as Array<any>).map((it) => {
+        const itemStyle = it['itemStyle'] ? this.toPlainObject(it['itemStyle']) : {} as any
+        return {
+          name: String(it['name']),
+          value: Number(it['value']),
+          itemStyle: itemStyle
+        }
+      })
+
       const option = {
         tooltip: {
           trigger: 'item',
@@ -94,15 +103,12 @@ export default {
           textStyle: { color: '#333' },
           extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px;'
         },
-        // 关闭 ECharts 的普通图例，使用外部自定义图例
         legend: { show: false },
         series: [
           {
             name: '性别比例',
             type: 'pie',
-            // 百分比定义半径，防止裁切
-            radius: ['60%', '78%'],
-            // 图表在容器内绝对居中
+            radius: ['58%', '75%'],
             center: ['50%', '50%'],
             avoidLabelOverlap: false,
             label: { show: false },
@@ -111,7 +117,7 @@ export default {
               scaleSize: 10,
               label: { show: false }
             },
-            data: this.genderData
+            data: plainData
           }
         ]
       }
@@ -163,13 +169,29 @@ export default {
     toPlainObject(obj: any): any {
       if (obj == null) return null
       if (typeof obj !== 'object') return obj
-      if (Array.isArray(obj)) return obj.map((item : any) : any => this.toPlainObject(item))
+      if (Array.isArray(obj)) {
+        return obj.map((item: any): any => this.toPlainObject(item))
+      }
       const plain: any = {}
       for (const key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
           const value = obj[key]
-          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') continue
-          plain[key] = (value != null && typeof value === 'object' && !Array.isArray(value)) ? this.toPlainObject(value) : value
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
+            continue
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            // 📌 参考 AnalyticsPieChart 的优化逻辑，处理普通对象拷贝
+            let isSimple = true
+            for (const k in value) {
+              if (typeof value[k] === 'object' && value[k] !== null) {
+                isSimple = false
+                break
+              }
+            }
+            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
+          } else {
+            plain[key] = value
+          }
         }
       }
       return plain
@@ -182,22 +204,22 @@ export default {
 .gender-card {
   background: #fff;
   border-radius: 4px;
-  padding: 20px;
+  padding: 24px;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
   box-sizing: border-box;
   width: 100%;
 }
 
 .card-header {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
   flex-shrink: 0;
 }
 
 .title {
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 700;
   color: #333;
 }
 
@@ -205,16 +227,19 @@ export default {
   flex: 1;
   width: 100%;
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
+/* 图例区 (横向排列) 对齐图片 */
 .legend-col {
-  width: 80px;
+  width: 100%;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 24px;
 }
 
 .legend-item {
@@ -226,34 +251,33 @@ export default {
 
 .legend-dot {
   width: 16px;
-  height: 10px;
+  height: 12px;
   border-radius: 2px;
 }
 
 .legend-label {
   font-size: 14px;
-  color: #666;
+  color: #333;
 }
 
+/* 核心图表列 (centered) */
 .chart-col {
-  flex: 1;
+  width: 100%;
   position: relative;
-  /**
-   * 确定高度策略 - 响应式复刻 CRMEB
-   * >=1200px (两列) 时保持紧凑高度
-   */
-  height: clamp(320px, 35vh, 400px);
-  overflow: hidden;
+  height: 300px;
+  overflow: visible !important;
+  display: flex;
+  justify-content: center;
 }
 
-/* 响应式断点：<1200px 切换为单列，图表需要更大空间 */
+/* 响应式断点 - 维持垂直布局并增加空间 */
 @media (max-width: 1199.98px) {
   .chart-col {
-    height: clamp(480px, 50vh, 600px);
+    height: 350px;
   }
 }
 
-/* 强制覆盖 EChartsView 内部样式，确保绝对定位生效 */
+/* 强制覆盖 EChartsView 样式 (确保完整铺满并通过 ECharts 配置居中) */
 :deep(.donut-chart) {
   width: 100% !important;
   height: 100% !important;
@@ -262,7 +286,7 @@ export default {
     position: relative !important;
     width: 100% !important;
     height: 100% !important;
-    overflow: hidden !important;
+    overflow: visible !important;
   }
   
   .ec-canvas {
@@ -273,6 +297,7 @@ export default {
   }
 }
 
+/* 图表中心文字 (必须绝对居中于容器，微调位置垂直视觉居中) */
 .center-text {
   position: absolute;
   top: 50%;
@@ -287,15 +312,16 @@ export default {
 }
 
 .total-label {
-  font-size: 13px;
-  color: #999;
-  margin-bottom: 4px;
+  font-size: 15px;
+  color: #666;
+  margin-bottom: 0;
+  font-weight: 700;
 }
 
 .total-value {
-  font-size: 32px;
-  font-weight: bold;
+  font-size: 48px;
+  font-weight: 700;
   color: #333;
-  line-height: 1;
+  line-height: 1.1;
 }
 </style>