ldt-manger-web/src/views/wel/index.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <third-register></third-register>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <basic-container>
          <avue-data-box :option="tenantCensus.option"></avue-data-box>
        </basic-container>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <basic-container>
          <div ref="tenantShop" style="height: 300px;width: 100%"></div>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {getTenantCensusCount} from '@/api/census/census';

  export default {
    name: "wel",
    data() {
      return {
        tenantCensus:{
          option: {
            span:6,
            data: [
              {
                title: '用户数量',
                count: 0,
                icon: 'el-icon-user',
                color: '#797878',
              },
              {
                title: '会员数量',
                count: 0,
                icon: 'el-icon-user-solid',
                color: '#000000',
              },
              {
                title: '商户数量',
                count: 0,
                icon: 'el-icon-s-custom',
                color: '#F3E803FF',
              },
              {
                title: '商场数量',
                count: 0,
                icon: 'el-icon-s-shop',
                color: '#38A1F2FF',
              },
            ]
          },
        },
        tenantShop:{
          dom:null,
          option:{
            title: {
              text: '租户数据数量统计'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: [], //设置x轴名称
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '用户数量',
                type: 'bar',
                barWidth: '50%',
                data: []
              }
            ]
          }
        },
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      //初始化方法
      init(){
        this.getTenantCensusCount()
        //适应容器动态变化
        // setTimeout(()=>{
        //   window.onresize = ()=>{
        //     for(const dom in this.$data){
        //       this.$data[dom].dom.resize();
        //     }
        //   };
        // },1000);
      },
      //获取租户数量
      getTenantCensusCount(){
        //获取租户数量
        getTenantCensusCount().then(res=>{
          this.tenantCensus.option.data[0].count = res.data.data.userCount;
          this.tenantCensus.option.data[1].count = res.data.data.memberCount;
          this.tenantCensus.option.data[2].count = res.data.data.shopCount;
          this.tenantCensus.option.data[3].count = res.data.data.mallCount;
        });
      },
      //获取租户数量
      getTenantShopCount(){
        //获取租户数量
        getTenantCensusCount().then(res=>{
          //配置
          res.data.data.forEach(ele=>{
            this.tenantCensus.option.xAxis[0].data.push(ele.tenantName);
            this.tenantCensus.option.series[0].data.push(ele.count);
          });

          this.tenantCensus.dom = echarts.init(this.$refs.tenantUser);
          this.tenantCensus.dom.setOption(this.tenantCensus.option);
        });
      },
    },
  };
</script>

<style>
  .el-font-size {
    font-size: 14px;
  }
</style>