居民监管、住房管理添加饼状图

Lou

2024-01-18 89acfd6e65807453da3e501bff320fc214f6b118

居民监管、住房管理添加饼状图

 src/views/propertySupervision/houseHoldSupervision.vue

@@ -24,7 +24,13 @@
              @click="manageLabel(row)">标签
            </el-button>
          </template> -->
          

          <template  slot="menuLeft">
            <div  class="echarts-wrap">
                <div  class="echarts-item"   id="echarts"></div> 
            </div>
          </template>


          <template slot-scope="{row, size}" slot="phone">
@@ -130,6 +136,11 @@
  import func from "@/util/func"
  // import householdManager from "./components/householdManager"
  import Qs from "qs"
  import * as echarts from 'echarts';
  import {
    getTreeList
} from '@/api/label/label'

  export default {
    components: {
      // householdManager
@@ -476,7 +487,8 @@
              formslot: true,
              span: 24,
            }
          ]
          ],
          labelCountList:[]
        }
      }
    },
@@ -512,7 +524,9 @@
        }
      }
    },
    mounted() {},
    mounted() {
      this.getLabelCount()
    },
    methods: {

      onsubmit() {
@@ -795,7 +809,72 @@
      },
      showStringDispose(row, type) {
        row[type] = !row[type]
      },
      
      getLabelCount(){
        getTreeList().then(res => {
            const data = res.data.data
            let list = data[1].children;
            this.labelCountList = list;
            this.$nextTick(()=>{
              this.setEchartsOption(list)
            })
        })
      },

      setEchartsOption(data){
        let  option = {
                  // title: {
                  //     text:"房屋",
                  //     left: 'center',
                  //     top:20,
                  // },
                  tooltip: {
                      trigger: 'item'
                  },
                 legend: {
                  orient: 'horizontal',
          left: 'right',
          top: 'bottom',
                  },
      //             labelLine: {
      //   length: 15,
      //   length2: 0,
      //   maxSurfaceAngle: 80
      // },
                series: [
                      {
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                   }
                 }
               ]
           };
          let myEchart = document.getElementById('echarts'); //获取类名
          let myCharts =  echarts.init(myEchart);
         for(let i = 0,ii = data.length;i<ii;i++){
            option.series[0].data.push({
              name:data[i].name,
              value:data[i].count,
              id:data[i].id
            });
            option && myCharts.setOption(option);
            myCharts.on('click',(params)=>{
                     console.log(params)
                     this.query.labelId = params.data.id;
                this.onLoad(this.page, this.query)     
            })
         }
        
      }

    }
  }
</script>
@@ -812,4 +891,13 @@
  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
  .echarts-wrap{
    display: flex;
    padding:0 30px;
    justify-content: center
  }
  .echarts-item{
    width:100%;
    height:300px;
  }
</style>

 src/views/propertySupervision/residentSupervision.vue

@@ -2,12 +2,21 @@
  <el-row>
    <el-col :span="24">
      <basic-container>


      
        <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
          v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
          :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
          @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
          @refresh-change="refreshChange" @on-load="onLoad">

          <template  slot="menuLeft">
            <div  class="echarts-wrap">
                <div  class="echarts-item"  v-for="(i,k) in labelCountList"  :key="k"></div> 
            </div>
          </template>
         
          <template slot-scope="{row, size}" slot="menu">
            <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_manager"
              @click="manageLabel(row)">标签
@@ -108,6 +117,10 @@
  import NProgress from 'nprogress'
  import 'nprogress/nprogress.css'
  import Qs from "qs"
  import * as echarts from 'echarts';
  import {
    getTreeList
} from '@/api/label/label'


  export default {
@@ -743,6 +756,9 @@
        currentLabel: {},
        currentRow: {},
        householdLabelList: [],

        labelCountList:[]

      }
    },
    watch: {
@@ -836,7 +852,10 @@
        }
      }
    },
    mounted() {},
    mounted() {
       this.getLabelCount();
    
    },
    methods: {
      init(row) {
        console.log(JSON.stringify(row))
@@ -1078,6 +1097,76 @@

      showStringDispose(row, type) {
        row[type] = !row[type]
      },

      getLabelCount(){
        getTreeList().then(res => {
            const data = res.data.data
            let list = data[0].children;
            this.labelCountList = list;
            this.$nextTick(()=>{
              this.setEchartsOption(list)
            })
        })
      },

      setEchartsOption(data){
        let  option = {
                  title: {
                      text:"",
                      left: 'center',
                      top:20,
                  },
                  tooltip: {
                      trigger: 'item'
                  },
                 legend: {
                  orient: 'horizontal',
          left: 'center',
          top: 70,
                  },
                  labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
                series: [
                      {
                    type: 'pie',
                    radius: '35%',
                    data: [],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                   }
                 }
               ]
           };
          let myEchart = document.getElementsByClassName('echarts-item'); //获取类名
         for(let i = 0,ii = data.length;i<ii;i++){
           let myCharts =  echarts.init(myEchart[i]);
            option.title.text = data[i].name;
            let series = [];
            for(let k = 0,kk = data[i].children.length;k<kk;k++){
              series.push({
                value:data[i].children[k].count,
                name:data[i].children[k].name,
                id:data[i].children[k].id,
              })
            }
            option.legend.type = series.length > 4?"scroll":"plain"
            option.series[0].data = series;
            option && myCharts.setOption(option);
            myCharts.on('click',(params)=>{
                     console.log(params)
                this.query.labelId = params.data.id;
                this.onLoad(this.page, this.query)
            })
         }
        
      }
    }
  }
@@ -1118,4 +1207,15 @@
  .box .el-scrollbar__wrap {
    overflow: scroll;
  }

  .echarts-wrap{
    display: flex;
    flex-wrap: wrap;
    padding:0 30px;
  }
  .echarts-item{
    width:320px;
    height:400px;
    margin:0 30px 30px 0;
  }
</style>