diff --git a/src/project/saas/AppDataStatistics/components/resident.vue b/src/project/saas/AppDataStatistics/components/resident.vue
index d302d6a4..bab06f86 100644
--- a/src/project/saas/AppDataStatistics/components/resident.vue
+++ b/src/project/saas/AppDataStatistics/components/resident.vue
@@ -18,16 +18,222 @@
     <!-- 特殊人群 -->
     <div class="specialPeople">
       <h3>特殊人群</h3>
-      <div>
-
+      <div class="specialBox">
+        <div id="specialEcharts"></div>
+      </div>
+    </div>
+    <!-- 年龄分布 -->
+    <div class="ageDistribution">
+      <h3>年龄分布</h3>
+      <div class="ageBox">
+        <div id="ageEcharts"></div>
+      </div>
+    </div>
+    <!-- 男女比例 -->
+    <div class="ageProportion">
+      <h3>男女比例</h3>
+      <div class="proportionBox">
+        <div id="proportionEcharts"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
+  name: "resident",
+  data() {
+    return {
 
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getSpecialEcharts()
+    this.getAgeEcherts()
+    this.getAgeProportion()
+  },
+  methods: {
+    // 特殊人群
+    getSpecialEcharts() {
+      let specialDom = document.getElementById('specialEcharts');
+      let myChart = echarts.init(specialDom);
+      let option = {
+        title: {
+          zlevel: 0,
+          text: ['{name|特殊人群}'],
+          top: 'center',
+          left: '48%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+            },
+          },
+        },
+        color: ['#4980CB','#F3A963','#6B79BB','#97D1B3'], 
+        series: [
+          {
+            name: '特殊人群',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            emphasis: {
+              disabled: false,
+              scale: false,
+              scaleSize: 0,
+            },
+            label: {
+              alignTo: 'labelLine',
+              formatter: '{name|{b}}\n{value|{c}}',
+              padding: [0, -70],
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+            labelLine: {
+              length: 15,
+              length2: 70,
+              maxSurfaceAngle: 80
+            },
+            data: [
+              { value: 1048, name: '退伍军人' },
+              { value: 735, name: '吸毒人员' },
+              { value: 580, name: '刑满释放人员' },
+              { value: 484, name: '高龄老人' },
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    // 年龄分布
+    getAgeEcherts() {
+      let ageDom = document.getElementById('ageEcharts');
+      let myChart = echarts.init(ageDom);
+      let option;
+      option = {
+        xAxis: {
+          type: 'category',
+          data: ['10以下', '10-18', '18-65', '65-80', '80以上']
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [136, 195, 162, 138, {
+              value: 98,
+              itemStyle: {
+                color: '#F3A963'
+              }
+            }],
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: "#3975C6",
+                label: {
+                  show: true,  //开启显示
+                  position: 'top',    //在上方显示
+                  textStyle: {
+                    fontSize: 13,
+                    color: '#4980CB'
+                  }
+                },
+              },
+            },
+            barWidth: 22,
+            barGap: '20%',
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    // 男女比例
+    getAgeProportion() {
+      let proportionDom = document.getElementById('proportionEcharts');
+      let myChart = echarts.init(proportionDom);
+      let option = {
+        title: {
+          zlevel: 0,
+          text: ['{name|男女比例}'],
+          top: 'center',
+          left: '48%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              name: {
+                color: '#999999',
+                fontSize: 13,
+                lineHeight: 15
+              },
+            },
+          },
+        },
+        
+        series: [
+          {
+            name: '特殊人群',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            emphasis: {
+              disabled: false,
+              scale: false,
+              scaleSize: 0,
+            },
+            label: {
+              alignTo: 'labelLine',
+              formatter: '{name|{b}}{value|{c}}\n',
+              padding: [0, -50],
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+            labelLine: {
+              length: 20,
+              length2: 50,
+              maxSurfaceAngle: 80
+            },
+            data: [
+              { value: 1048, name: '男',itemStyle: { color: '#3975C6'}},
+              { value: 735, name: '女' ,itemStyle: { color: '#F3A963'}},
+            ]
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+  },
+  destroyed() {
+
+  },
 }
 </script>
 
@@ -61,9 +267,26 @@ export default {
     }
   }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
-  .specialPeople {
+  .specialPeople,
+  .ageDistribution,
+  .ageProportion {
     margin-top: 32px;
+    .specialBox,
+    .ageBox,
+    .proportionBox {
+      margin-top: 24px;
+      width: 100%;
+      height: 480px;
+      border-radius: 8px;
+      background: #FFF;
 
+      #specialEcharts,
+      #ageEcharts,
+      #proportionEcharts {
+        width: 100%;
+        height: 100%;
+      }
+    }
     
   }
 }