SmartCommunity/operationSupport/src/views/newWorkBench/components/workbenchMent/householdDistribution.vue

<template>
  <div class="modelBlock">
    <template v-if="permissionFiltering">
      <div class="model-title">
        <div class="model-title-text">住户年龄分布</div>
      </div>
      <div class="model-content">
        <zz-echart
          :option="clientOptions"
          class="chart"
        ></zz-echart>
      </div>
    </template>
    <no-permission
      v-else
      tipsText="住户年龄分布"
    ></no-permission>
  </div>
</template>
<script>
import { columnOptionsChartName } from '../indexOptionChart.js';
import permissionComponent from '../permissionComponent';
export default {
  mixins: [permissionComponent],
  data () {
    return {
      defaultModel: {
        permissUrl: '12',
        titleName: '住户管理'
      },
      mixins_query: {
        communityId: ''
      },
      clientOptions: columnOptionsChartName(
        '(人)',
        ['name1', 'name2', 'name3'],
        [
          {
            name: 'name1',
            data: 0
          },
          {
            name: 'name2',
            data: 0
          },
          {
            name: 'name3',
            data: 0
          }
        ],
        [],
        10
      )
    };
  },
  created () {
    this.getData();
  },
  mounted () { },
  computed: {},
  methods: {
    getData () {
      this.$http.get('/sc-community-web/statisticGeneration', this.mixins_query)
        .then(({ status, data, msg }) => {
          debugger
          if (status == 0) {
            let name = ['0-18岁', '19-30岁', '31-40岁', '41-50岁', '51-60岁', '60岁以上']
            debugger
            let date = []
            let dateRes = [];
            for (let a in data.datas) {
              date.push(data.datas[a])
            }
            console.log('date', date);
            for (let i = 0; i < name.length; i++) {
              dateRes.push({
                name: name[i],
                data: date[i]
              })
            }
            this.clientOptions = columnOptionsChartName('(人)', name, dateRes, [], 10);
          }
        })
        .catch((err) => { });
    }
  }
};
</script>
<style scoped lang="scss">
@import '../style.scss';
</style>