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

<template>
  <div class="resident">
    <div class="resident_num">
      <div class="num_item">
        <p class="num_item_name">居民总数</p>
        <p class="num_item_data">2036</p>
      </div>
      <div class="num_item">
        <p class="num_item_name">居民总数</p>
        <p class="num_item_data">2036</p>
      </div>
      <div class="num_item">
        <p class="num_item_name">居民总数</p>
        <p class="num_item_data">2036</p>
      </div>
    </div>

    <!-- 特殊人群 -->
    <div class="specialPeople">
      <h3>特殊人群</h3>
      <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>
.resident {
  padding: 0 30px;
  box-sizing: border-box;

  .resident_num {
    width: 100%;
    height: 160px;
    background: #FFF;
    margin-top: 32px;
    border-radius: 16px;
    display: flex;
    .num_item {
      width: 33%;
      height: 100%;
      text-align: center;
      margin-top: 32px;

      .num_item_name {
        color: #666666;
      }

      .num_item_data {
        margin-top: 10px;
        color: #000000;
        font-size: 36px;
      }
    }
  }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
  .specialPeople {
    margin-top: 32px;
    .specialBox {
      margin-top: 24px;
      width: 100%;
      height: 480px;
      border-radius: 8px;
      background: #FFF;

      #specialEcharts {
        width: 100%;
        height: 100%;
      }
    }
    
  }
}
</style>