继续完善页面

components/analytics/AnalyticsUserGenderSection.uvue

@@ -0,0 +1,176 @@
+<template>
+  <view class="gender-card">
+    <view class="card-header">
+      <text class="title">用户性别比例</text>
+    </view>
+    
+    <view class="card-content">
+      <view class="chart-container">
+        <EChartsView :option="chartOption" class="donut-chart" />
+        <view class="center-text">
+          <text class="total-label">总用户数</text>
+          <text class="total-value">{{ totalUsers }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+
+export default {
+  components: {
+    EChartsView
+  },
+  data() {
+    return {
+      totalUsers: 525,
+      chartOption: {} as any
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initChart()
+    }, 200)
+  },
+  methods: {
+    initChart() {
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          top: '0%',
+          left: 'center',
+          icon: 'rect',
+          itemWidth: 15,
+          itemHeight: 15,
+          textStyle: {
+            fontSize: 12,
+            color: '#666'
+          }
+        },
+        series: [
+          {
+            name: '性别比例',
+            type: 'pie',
+            radius: ['50%', '75%'],
+            center: ['50%', '60%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 450, name: '未知', itemStyle: { color: '#999999' } },
+              { value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
+              { value: 25, name: '女', itemStyle: { color: '#f97316' } }
+            ]
+          }
+        ]
+      }
+      this.chartOption = this.toPlainObject(option)
+    },
+    toPlainObject(obj: any): any {
+      if (obj == null) return null
+      if (typeof obj !== 'object') return obj
+      if (Array.isArray(obj)) {
+        return obj.map((item) => 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
+          }
+          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+            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
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.gender-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 20px;
+  height: 521px;
+}
+
+.card-header {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.donut-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.center-text {
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+
+.total-label {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.total-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+}
+</style>