完善用人方小程序数据统计页面：新增年龄饼状图和性别柱状图

- 将省份统计改为全部展示，新增山东省、四川省、湖北省
- 添加年龄分布饼状图，展示四个年龄段的分布比例
- 添加性别分布柱状图，直观显示男女比例
- 优化统计图表样式，提升数据可视化效果

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

yongren.html

@@ -91,6 +91,65 @@
         .name-avatar.orange {
             background-color: #f59e0b;
         }
+        .pie-chart {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            position: relative;
+            margin: 0 auto;
+            background: conic-gradient(
+                #3b82f6 0% 40%,
+                #10b981 40% 65%,
+                #f59e0b 65% 85%,
+                #8b5cf6 85% 100%
+            );
+        }
+        .pie-legend {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 12px;
+            margin-top: 16px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+        }
+        .legend-color {
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+            margin-right: 6px;
+        }
+        .bar-chart {
+            height: 120px;
+            display: flex;
+            align-items: end;
+            justify-content: center;
+            gap: 40px;
+            margin: 20px 0;
+        }
+        .bar-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .bar {
+            width: 40px;
+            border-radius: 4px 4px 0 0;
+            transition: height 0.3s ease;
+        }
+        .bar-label {
+            margin-top: 8px;
+            font-size: 12px;
+            color: #6b7280;
+        }
+        .bar-value {
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
         .progress-bar {
             height: 6px;
             border-radius: 3px;
@@ -846,7 +905,48 @@
                             </div>
                         </div>
 
-                        <!-- 新增：户籍省份分布 -->
+                        <!-- 性别分布 -->
+                        <div class="card bg-white p-4 mb-4">
+                            <h3 class="font-semibold text-gray-700 mb-3">性别分布</h3>
+                            <div class="bar-chart">
+                                <div class="bar-container">
+                                    <div class="bar-value">16人</div>
+                                    <div class="bar" style="height: 100px; background-color: #3b82f6;"></div>
+                                    <div class="bar-label">男性 (67%)</div>
+                                </div>
+                                <div class="bar-container">
+                                    <div class="bar-value">8人</div>
+                                    <div class="bar" style="height: 50px; background-color: #ec4899;"></div>
+                                    <div class="bar-label">女性 (33%)</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 年龄分布 -->
+                        <div class="card bg-white p-4 mb-4">
+                            <h3 class="font-semibold text-gray-700 mb-3">年龄分布</h3>
+                            <div class="pie-chart"></div>
+                            <div class="pie-legend">
+                                <div class="legend-item">
+                                    <div class="legend-color" style="background-color: #3b82f6;"></div>
+                                    <span>25岁以下 (40%)</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color" style="background-color: #10b981;"></div>
+                                    <span>25-35岁 (25%)</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color" style="background-color: #f59e0b;"></div>
+                                    <span>35-45岁 (20%)</span>
+                                </div>
+                                <div class="legend-item">
+                                    <div class="legend-color" style="background-color: #8b5cf6;"></div>
+                                    <span>45岁以上 (15%)</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 户籍省份分布 -->
                         <div class="card bg-white p-4 mb-4">
                             <h3 class="font-semibold text-gray-700 mb-3">户籍省份分布</h3>
                             <div class="space-y-3">
@@ -879,11 +979,29 @@
                                 </div>
                                 <div>
                                     <div class="flex justify-between text-sm mb-1">
-                                        <span class="text-gray-700">其他省份</span>
-                                        <span class="text-gray-500">6人</span>
+                                        <span class="text-gray-700">山东省</span>
+                                        <span class="text-gray-500">3人</span>
+                                    </div>
+                                    <div class="progress-bar">
+                                        <div class="progress-fill bg-purple-500" style="width: 12%"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex justify-between text-sm mb-1">
+                                        <span class="text-gray-700">四川省</span>
+                                        <span class="text-gray-500">2人</span>
+                                    </div>
+                                    <div class="progress-bar">
+                                        <div class="progress-fill bg-pink-500" style="width: 8%"></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="flex justify-between text-sm mb-1">
+                                        <span class="text-gray-700">湖北省</span>
+                                        <span class="text-gray-500">1人</span>
                                     </div>
                                     <div class="progress-bar">
-                                        <div class="progress-fill bg-purple-500" style="width: 25%"></div>
+                                        <div class="progress-fill bg-indigo-500" style="width: 4%"></div>
                                     </div>
                                 </div>
                             </div>