年龄分布，男女比例

src/project/saas/AppDataStatistics/components/resident.vue

@@ -22,6 +22,20 @@
         <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>
 
@@ -38,17 +52,18 @@ export default {
   },
   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: [
+          text: ['{name|特殊人群}'],
-            '{name|特殊人群}',
-          ].join('\n'),
           top: 'center',
           left: '48%',
           textAlign: 'center',
@@ -103,10 +118,119 @@ export default {
         ]
       };
       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>
@@ -141,16 +265,22 @@ export default {
     }
   }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
-  .specialPeople {
+  .specialPeople,
+  .ageDistribution,
+  .ageProportion {
     margin-top: 32px;
-    .specialBox {
+    .specialBox,
+    .ageBox,
+    .proportionBox {
       margin-top: 24px;
       width: 100%;
       height: 480px;
       border-radius: 8px;
       background: #FFF;
 
-      #specialEcharts {
+      #specialEcharts,
+      #ageEcharts,
+      #proportionEcharts {
         width: 100%;
         height: 100%;
       }