SmartCommunity/commandCenter/src/views/communityAssets/assembly/householdGender.vue

<template>
  <div class="modelBlock">
    <div class="model-title">
      <div class="model-title-text">住户性别占比</div>
    </div>
    <div class="model-content">
      <zz-echart
        :option="clientOptions"
        class="chart"
      ></zz-echart>
      <div class="totals">
        <span style="color:#FFFFFF">{{ total }}</span>
        <span
          class="numbers"
          style="color:#FFFFFF"
        >总人数</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ringType } from './indexOptionChart';
export default {
  data () {
    return {
      mixins_query: {
        communityId: ''
      },
      total: 0,
      clientOptions: ringType(
        [],
        [
          { value: 0, name: '男' },
          { value: 0, name: '女' }
        ],
        {},
        { type: '%', total: 0 }
      )
    };
  },
  methods: {
    getData () {
      this.$http.get('/sc-community/statisticUserGender', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0 && !!data.datas) {
          this.clientOptions = ringType([], this.eachartObj(data), {}, { type: '%', total: data.total });
        } else {
          this.clientOptions = ringType(
            [],
            [
              { value: 0, name: '男' },
              { value: 0, name: '女' }
            ],
            {},
            { type: '%', total: 0 }
          );
        }
      });
    },
    eachartObj (data) {
      this.total = data.total;
      let typeName = {
        1: '男',
        2: '女'
      };
      let newData = [];
      for (let a in data.datas) {
        newData.push({
          value: data.datas[a],
          name: typeName[a]
        });
      }
      return newData;
    }
  },
  created () {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
@import '../style.scss';
</style>