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 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
              },
            },
          },
        },
        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>

<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,
  .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%;
      }
    }
    
  }
}
</style>