特殊人群环状图

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

@@ -18,17 +18,97 @@
     <!-- 特殊人群 -->
     <div class="specialPeople">
       <h3>特殊人群</h3>
-      <div>
+      <div class="specialBox">
-
+        <div id="specialEcharts"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
+  name: "resident",
+  data() {
+    return {
 
     }
+  },
+  created() {
+  },
+  mounted() {
+    this.getSpecialEcharts()
+  },
+  methods: {
+    getSpecialEcharts() {
+      let specialDom = document.getElementById('specialEcharts');
+      let myChart = echarts.init(specialDom);
+      let option = {
+        title: {
+          zlevel: 0,
+          text: [
+            '{name|特殊人群}',
+          ].join('\n'),
+          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}}\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);
+    }
+  },
+  destroyed() {
+    
+  },
+}
 </script>
 
 <style lang="scss" scoped>
@@ -63,7 +143,18 @@ export default {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
   .specialPeople {
     margin-top: 32px;
+    .specialBox {
+      margin-top: 24px;
+      width: 100%;
+      height: 480px;
+      border-radius: 8px;
+      background: #FFF;
 
+      #specialEcharts {
+        width: 100%;
+        height: 100%;
+      }
+    }
     
   }
 }