首页

.env.prostaging

@@ -3,10 +3,6 @@ NODE_ENV = production
 # just a flag
 ENV = 'prostaging'
 
-# base api
-#VUE_APP_BASE_API=http://wuxiwuye.ali251.langye.net/
-#VUE_APP_UPLOAD_API=http://wuxiwuye.ali251.langye.net/api/admin/upload-file
-#VUE_APP_PREVIEW=//view.langye.net:8012/onlinePreview
 # base api
 VUE_APP_BASE_API=''
 VUE_APP_UPLOAD_API=/api/admin/upload-file

package.json

@@ -5,6 +5,7 @@
   "author": "Pan <panfree23@gmail.com>",
   "scripts": {
     "dev": "vue-cli-service serve",
+    "dev:prod": "vue-cli-service serve --mode production",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "build:prostaging": "vue-cli-service build --mode prostaging",

src/store/modules/bigdata.js

@@ -1,4 +1,5 @@
 import { index } from "@/api/system/baseForm";
+import { departmentStatistics } from "@/api/statics";
 import * as $moment from "moment";
 const state = {
   assets: [[],[]],
@@ -7,6 +8,7 @@ const state = {
   safety: [],
   safetyPlan: [],
   adventSafetyPlan: [],
+  departmentStatics: {},
   type: 1,
   is_auth: 1,
 }
@@ -36,6 +38,9 @@ const mutations = {
   },
   SET_SAFETY: (state, safety) => {
     state.safety = safety
+  },
+  SET_DEPARTMENT_STATICS: (state, val) => {
+    state.departmentStatics = val
   }
 }
 
@@ -235,7 +240,17 @@ const actions = {
         reject(err)
       })
     })
-  }
+  },
+   async getDepartmentStatics({ commit }) {
+     return new Promise((resolve, reject) => {
+       departmentStatistics().then(res => {
+         commit("SET_DEPARTMENT_STATICS", res.departments)
+         resolve(res)
+       }).catch(err => {
+         reject(err)
+       })
+     })
+   }
 }
 
 export default {

src/views/assets/detail.vue

@@ -1193,7 +1193,7 @@ export default {
           if ((this.detail.tudiquanshuren !== this.detail.quanliren) ||
             (this.detail.dengjimianji !== this.detail.shijimianji)) {
             let text = ""
-            text += this.detail.tudiquanshuren !== this.detail.quanliren
+            text += (this.detail.hasOwnProperty('land_id') ? (this.detail.quanshuren !== this.detail.quanliren) : (this.detail.tudiquanshuren !== this.detail.quanliren))
               ? " 权利人名称不符 "
               : ""
             text += this.detail.dengjimianji !== this.detail.shijimianji

src/views/dataShow/index.vue

@@ -68,7 +68,8 @@ export default {
       getAdventLeases: "getAdventLeases",
       getSafety: "getSafety",
       getSafetyPlan: "getSafetyPlan",
-      getAdventSafetyPlan: "getAdventSafetyPlan"
+      getAdventSafetyPlan: "getAdventSafetyPlan",
+      getDepartmentStatics: "getDepartmentStatics"
     })
   },
   computed: {
@@ -88,6 +89,7 @@ export default {
     this.getSafety()
     this.getSafetyPlan()
     this.getAdventSafetyPlan()
+    this.getDepartmentStatics()
   }
 }
 </script>

src/views/dataShow/leftBottom.vue

@@ -10,7 +10,7 @@
     </svg>
     <dv-border-box-13 v-for="item in items" class="dv-box">
       <template v-if="item.tag === 'total'">
-        <div class="card">
+        <div class="card" @click="toStatics">
           <div class="card-left">
             <p class="card__title">{{ item.text }}</p>
             <p class="card__text">
@@ -34,7 +34,7 @@
         </div>
       </template>
       <template v-else>
-        <div class="card">
+        <div class="card" @click="toStatics">
           <div class="card-left">
             <p class="card__title">{{ item.text }}</p>
             <p class="card__text">
@@ -90,7 +90,11 @@ export default {
       ]
     }
   },
-  methods: {},
+  methods: {
+    toStatics () {
+      this.$router.push('/statics/department')
+    }
+  },
   computed: {
     total () {
       return function(tag) {

src/views/dataShow/map.vue

@@ -13,7 +13,27 @@
       </div>
       <div class="switch-btn__bkg"></div>
     </div>
-    <tooltip ref="tooltip" class="tooltip-table" :info="params" :area="areaName" :style="{ left: mapTooltipPos.x + 'px', top: mapTooltipPos.y + 'px' }"></tooltip>
+    <div class="department-statics">
+      <dv-border-box-12 style="min-width: 200px;" :key="departmentStaticsId">
+        <div class="department-statics__item" v-for="dept in $store.state.bigdata.departmentStatics" :key="dept.id">
+          <div class="department-statics__item--name">{{ dept.name }}</div>
+          <div class="department-statics__item--land">
+            <SvgIcon icon-class="tudi" class="text-icon"></SvgIcon>
+            土地 <span class="text-icon">{{ dept.land_count }}</span>
+          </div>
+          <div class="department-statics__item--house">
+            <SvgIcon icon-class="fangwu" class="text-icon"></SvgIcon>
+            房产 <span class="text-icon">{{ dept.house_count }}</span>
+          </div>
+        </div>
+      </dv-border-box-12>
+    </div>
+    <div class="other-asset" ref="otherAssetBoard" v-if="config.data.length > 0">
+      <img class="other-asset__arrow" :src="require('@/assets/arrow.png')" alt="">
+
+      <dv-scroll-board :config="config" style="width:260px;height:200px" @click="boardClick" />
+    </div>
+    <tooltip ref="tooltip" class="tooltip-table" :info="params" :house="infoHouse" :area="areaName" :style="mapTooltipPos.position === 'fixed' ? { position: mapTooltipPos.position, left: mapTooltipPos.x + 'px', top: mapTooltipPos.y + 'px' } : { position: mapTooltipPos.position, bottom: '10px', right: '280px' }"></tooltip>
   </div>
 </template>
 
@@ -23,15 +43,19 @@ import * as echarts from 'echarts'
 import 'echarts-gl'
 import WUXI from '@/assets/wuxi.json'
 import tooltip from './tooltip.vue'
+import SvgIcon from "@/components/SvgIcon"
 import { show as customFormFieldShow } from '@/api/system/customFormField'
 
 export default {
   components: {
-    tooltip
+    tooltip,
+    SvgIcon
   },
   data() {
     return {
+      infoHouse: [],
       areaName: "",
+      wxAreas: ["宜兴市", "惠山区", "新吴区", "梁溪区", "江阴市", "滨湖区", "锡山区"],
       areas: new Map([
         [1,"宜兴市"],
         [2,"惠山区"],
@@ -73,10 +97,25 @@ export default {
       mapTooltipPos: {
         x: 0,
         y: 0,
-      }
+        position: 'fixed'
+      },
+
+      config: {
+        data: []
+      },
+      departmentStaticsWatch: null,
+      departmentStaticsId: 0,
     }
   },
   methods: {
+    boardClick ({ rowIndex }) {
+      let data = this.labelData.filter(i => !i.isWx)[rowIndex]
+      this.mapTooltipPos.position = 'absolute'
+      this.areaName = data?.name
+      this.params = data?.originalData
+      this.infoHouse = data?.originalHouse
+      this.$refs.tooltip.show()
+    },
     async getWxAreas () {
       try {
         const res = await customFormFieldShow({ id: 120 })
@@ -106,8 +145,10 @@ export default {
       this.chart.on("click", params => {
         this.mapTooltipPos.x = params.event.offsetX;
         this.mapTooltipPos.y = params.event.offsetY;
+        this.mapTooltipPos.position = 'fixed';
         this.areaName = params.name;
-        this.params = params?.data?.originalData;
+        this.infoHouse = this.labelData.find(j => j.name === params.name)?.originalHouse
+        this.params = this.labelData.find(j => j.name === params.name)?.originalData;
         this.$refs.tooltip.show()
       })
     },
@@ -119,19 +160,20 @@ export default {
     },
     setOption () {
       this.chart.setOption(this.chartOption);
+    },
+    setConfig () {
+      this.config = {
+        headerBGC: '#4fa497',
+        header: ['区域', '数量'],
+        data: this.labelData.filter(i => !i.isWx).map(i => [i.name, i.value]),
+        columnWidth: [200, 180],
+        align: ['center', 'center']
+      }
     }
   },
   computed: {
     chartOption () {
       return {
-        // tooltip: {
-        //   trigger: 'item',
-        //   formatter: (params) => {
-        //     this.params = params;
-        //
-        //     return this.mapTooltip;
-        //   },
-        // },
         series: [{
           type: 'map3D', // map、map3D
           map: 'wuxi', // 注册的地图名称
@@ -224,15 +266,10 @@ export default {
         tag: item[0],
         name: item[1],
         value: 0,
-        originalData: []
+        originalData: [],
+        originalHouse: [],
+        isWx: this.wxAreas.indexOf(item[1]) !== -1
       }))
-      // houses.forEach(item => {
-      //   let find = temp.find(v => v.tag === item.area)
-      //   if (find) {
-      //     find.value++;
-      //     find.originalData.push(item)
-      //   }
-      // })
       lands.forEach(item => {
         let find = temp.find(v => v.tag === item.area)
         if (find) {
@@ -240,6 +277,12 @@ export default {
           find.originalData.push(item)
         }
       })
+      houses.forEach(item => {
+        let find = temp.find(v => v.tag === item.area)
+        if (find) {
+          find.originalHouse.push(item)
+        }
+      })
 
       return temp.filter(v => v.value > 0);
     }
@@ -247,13 +290,18 @@ export default {
   watch: {
     labelData () {
       this.setOption()
-    }
+      this.setConfig()
+    },
   },
   created() {
     this.getWxAreas()
   },
   mounted() {
     this.initMap();
+    this.departmentStaticsWatch = this.$watch(() => this.$store.state.bigdata?.departmentStatics, () => this.departmentStaticsId++)
+  },
+  beforeDestroy() {
+    this.departmentStaticsWatch()
   }
 }
 </script>
@@ -265,10 +313,10 @@ export default {
   background: linear-gradient(to bottom, #00000022 , #61b9ac66);
 }
 .tooltip-table {
+  width: 606px;
+  height: 500px;
   position: fixed;
   z-index: 99999996;
-  top: 0;
-  left: 0;
 }
 .switch-btn {
   position: absolute;
@@ -329,4 +377,41 @@ export default {
     }
   }
 }
+.department-statics {
+  position: absolute;
+  left: 10px;
+  top: 90px;
+  max-height: calc(100vh - 110px);
+  overflow: hidden scroll;
+
+  &__item {
+    color: #fff;
+    padding: 12px 18px;
+
+    &--name {
+      font-size: 17px;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+    &--house, &--land {
+      text-indent: 6px;
+    }
+    .text-icon {
+      color: #73f3df;
+    }
+  }
+}
+.other-asset {
+  cursor: pointer;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+
+  &__arrow {
+    width: 110px;
+    height: 160px;
+    object-fit: contain;
+    transform: translateX(-30px) rotate(9deg);
+  }
+}
 </style>

src/views/dataShow/tooltip.vue

@@ -1,7 +1,13 @@
 <template>
   <transition name="fade">
     <div v-show="isShow" ref="tooltip">
-      <Table class="table" height="500" stripe :data="showInfo" :columns="columns"></Table>
+      <Table class="table"
+             height="500"
+             stripe
+             show-summary
+             :summary-method="handleSummary"
+             :data="showInfo"
+             :columns="columns"></Table>
     </div>
   </transition>
 </template>
@@ -13,6 +19,10 @@ export default {
     info: {
       type: Array,
       default: () => []
+    },
+    house: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -39,7 +49,7 @@ export default {
         {
           key: 'department.name',
           title: '所属公司',
-          width: 180,
+          width: 170,
           align: 'center',
           render: (h, { row }) => h('div', row.department ? row.department.name : '')
         },
@@ -90,12 +100,39 @@ export default {
       if (!(tooltipDom === e.target || tooltipDom.contains(e.target))) {
         this.hide()
       }
+    },
+    handleSummary({ columns, data }) {
+      const sums = {};
+      columns.forEach((column, index) => {
+        const key = column.key;
+        if (index === 0) {
+          let landSum = this.info?.reduce((pre, cur) => pre + isNaN(Number(cur.shijimianji)) ? 0 : Number(cur.shijimianji),0)
+          sums[key] = {
+            key,
+            value: '土地'+landSum+'（m²）'
+          };
+          return;
+        } else if (index === 1) {
+          let houseSum = this.house?.reduce((pre, cur) => pre + isNaN(Number(cur.shijimianji)) ? 0 : Number(cur.shijimianji),0)
+          sums[key] = {
+            key,
+            value: '房产'+houseSum+'（m²）'
+          };
+          return;
+        } else {
+          sums[key] = {
+            key,
+            value: ''
+          };
+        }
+      });
+
+      return sums;
     }
   },
   computed: {
     showInfo () {
       return this.info
-      //return this.info?.slice(this.index, this.index + 8) || [];
     }
   },
   watch: {

src/views/lease/component/LetImport.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/statics/DepartmentStatistics.vue

@@ -9,16 +9,23 @@
         >
           <div slot="content"></div>
           <slot>
-            <DatePicker style="padding-left: 20px;" v-model="year" type="year" formatter="yyyy"></DatePicker>
-
           </slot>
 
         </LxHeader>
       </div>
 
       <div style="padding: 0 20px;">
-        <barLineChart id="department-statistics" width="100%" height="300px"></barLineChart>
+        <el-row :gutter="20">
-        <barLineChart1 id="department-statistics1" width="100%" height="300px" style="margin-top: 20px;"></barLineChart1>
+          <el-col :span="12">
+            <LandPieChart id="land-pie-chart" width="100%" height="300px" :my-data="data" />
+          </el-col>
+          <el-col :span="12">
+            <HousePieChart id="house-pie-chart" width="100%" height="300px" :my-data="data" />
+          </el-col>
+        </el-row>
+
+        <barLineChart id="department-statistics" :my-data="data" width="100%" height="300px" style="margin-top: 20px;"></barLineChart>
+        <barLineChart1 id="department-statistics1" :my-data="data" width="100%" height="300px" style="margin-top: 20px;"></barLineChart1>
       </div>
     </div>
   </div>
@@ -26,21 +33,35 @@
 
 <script>
 import LxHeader from '@/components/LxHeader/index.vue'
+import LandPieChart from '@/views/statics/component/LandPieChart.vue'
+import HousePieChart from '@/views/statics/component/HousePieChart.vue'
 import barLineChart from '@/views/statics/component/barLineChart.vue'
 import barLineChart1 from '@/views/statics/component/barLineChart1.vue'
+import { departmentStatistics } from '@/api/statics'
 export default {
   components: {
     LxHeader,
     barLineChart,
-    barLineChart1
+    barLineChart1,
+    LandPieChart,
+    HousePieChart
   },
   data() {
     return {
-      year: new Date().getFullYear().toString()
+      year: new Date().getFullYear().toString(),
+      data: [],
     }
   },
-  methods: {},
+  methods: {
-  computed: {}
+    async getData () {
+      const res = await departmentStatistics();
+      this.data = res.departments;
+    },
+  },
+  computed: {},
+  created() {
+    this.getData()
+  }
 }
 </script>
 

src/views/statics/component/HousePieChart.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    myData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  created() {
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.$nextTick(() => {
+        this.chart = echarts.init(document.getElementById(this.id))
+        this.setOption()
+      })
+    },
+    setOption () {
+      this.chart.setOption({
+        title: {
+          text: "房产资产"
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '房产数量',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.myData?.map(i => ({
+              value: i.house_count,
+              name: i.name
+            }))
+          }
+        ]
+      })
+    }
+  },
+  watch: {
+    myData: {
+      handler: function() {
+        this.initChart()
+      },
+      immediate: true
+    }
+  }
+}
+</script>

src/views/statics/component/LandPieChart.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    myData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.$nextTick(() => {
+        this.chart = echarts.init(document.getElementById(this.id))
+        this.setOption()
+      })
+    },
+    setOption () {
+      this.chart.setOption({
+        title: {
+          text: "土地资产"
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '土地数量',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.myData?.map(i => ({
+              value: i.land_count,
+              name: i.name
+            }))
+          }
+        ]
+      })
+    }
+  },
+  watch: {
+    myData: {
+      handler: function() {
+        this.initChart()
+      },
+      immediate: true
+    }
+  }
+}
+</script>

src/views/statics/component/barLineChart.vue

@@ -28,16 +28,18 @@ export default {
     height: {
       type: String,
       default: '200px'
+    },
+    myData: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       chart: null,
-      data: [],
     }
   },
   mounted() {
-    this.getData().then(_ => this.initChart())
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -46,15 +48,36 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  computed: {
+  },
+  watch: {
+    myData: {
+      handler: function(newVal) {
+        this.initChart()
+      },
+      immediate: true
+    }
+  },
   methods: {
-    async getData () {
+    handleNum (num, precision=2) {
-      const res = await departmentStatistics();
+      if (!num) return Number(0).toFixed(precision)
-      console.log(res)
+      if (typeof num === 'string') {
-      this.data = res.departments;
+        if (isNaN(Number(num))) {
+          return Number(0).toFixed(precision)
+        } else {
+          return Number(num).toFixed(precision)
+        }
+      } else if (typeof num === 'number') {
+        return num.toFixed(precision)
+      } else {
+        return Number(0).toFixed(precision)
+      }
     },
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
+      this.$nextTick(() => {
-      this.setOption()
+        this.chart = echarts.init(document.getElementById(this.id))
+        this.setOption()
+      })
     },
     setOption () {
       this.chart.setOption({
@@ -90,11 +113,23 @@ export default {
             saveAsImage: { show: true }
           }
         },
+        dataZoom: [
+          {
+            type: 'inside'
+          },
+          {
+            type: 'slider'
+          }
+        ],
         xAxis: [
           {
             type: 'category',
             axisTick: { show: false },
-            data: this.data.map(i => i.name)
+            axisLabel: {
+              interval: 0,
+              rotate: 37
+            },
+            data: this.myData.map(i => i.name)
           }
         ],
         yAxis: [
@@ -104,59 +139,26 @@ export default {
         ],
         series: [
           {
-            name: '土地',
+            barWidth: 30,
-            type: 'bar',
-            barGap: 0,
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.land_count)
-          },
-          {
-            name: '土地登记面积',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.land_dengjimianji.toFixed(2))
-          },
-          {
             name: '土地实际面积',
             type: 'bar',
             emphasis: {
               focus: 'series'
             },
-            data: this.data.map(i => i.land_shijimianji.toFixed(2))
+            data: this.myData.map(i => this.handleNum(i.land_shijimianji))
-          },
-          {
-            name: '房产',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.house_count)
-          },
-          {
-            name: '房产登记面积',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.house_dengjimianji.toFixed(2))
           },
           {
+            barWidth: 30,
             name: '房产实际面积',
             type: 'bar',
             emphasis: {
               focus: 'series'
             },
-            data: this.data.map(i => i.house_shijimianji.toFixed(2))
+            data: this.myData.map(i => this.handleNum(i.house_shijimianji))
           },
         ]
       })
     }
   },
-  watch: {
-  }
 }
 </script>

src/views/statics/component/barLineChart1.vue

@@ -28,16 +28,18 @@ export default {
     height: {
       type: String,
       default: '200px'
+    },
+    myData: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       chart: null,
-      data: [],
     }
   },
   mounted() {
-    this.getData().then(_ => this.initChart())
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -46,15 +48,34 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  watch: {
+    myData: {
+      handler: function() {
+        this.initChart()
+      },
+      immediate: true
+    }
+  },
   methods: {
-    async getData () {
+    handleNum (num, precision=2) {
-      const res = await departmentStatistics();
+      if (!num) return Number(0).toFixed(precision)
-      console.log(res)
+      if (typeof num === 'string') {
-      this.data = res.departments;
+        if (isNaN(Number(num))) {
+          return Number(0).toFixed(precision)
+        } else {
+          return Number(num).toFixed(precision)
+        }
+      } else if (typeof num === 'number') {
+        return num.toFixed(precision)
+      } else {
+        return Number(0).toFixed(precision)
+      }
     },
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
+      this.$nextTick(() => {
-      this.setOption()
+        this.chart = echarts.init(document.getElementById(this.id))
+        this.setOption()
+      })
     },
     setOption () {
       this.chart.setOption({
@@ -90,11 +111,23 @@ export default {
             saveAsImage: { show: true }
           }
         },
+        dataZoom: [
+          {
+            type: 'inside'
+          },
+          {
+            type: 'slider'
+          }
+        ],
         xAxis: [
           {
             type: 'category',
             axisTick: { show: false },
-            data: this.data.map(i => i.name)
+            axisLabel: {
+              interval: 0,
+              rotate: 37
+            },
+            data: this.myData.map(i => i.name)
           }
         ],
         yAxis: [
@@ -104,59 +137,26 @@ export default {
         ],
         series: [
           {
-            name: '租赁台账',
+            barWidth: 30,
-            type: 'bar',
+            name: '租赁土地面积',
-            barGap: 0,
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.lease_count)
-          },
-          {
-            name: '出租土地',
             type: 'bar',
             emphasis: {
               focus: 'series'
             },
-            data: this.data.map(i => i.leases_land_count)
+            data: this.myData.map(i => this.handleNum(i.leases_land_dengjimianji))
           },
           {
-            name: '出租土地面积',
+            barWidth: 30,
+            name: '租赁房产面积',
             type: 'bar',
             emphasis: {
               focus: 'series'
             },
-            data: this.data.map(i => i.leases_land_dengjimianji.toFixed(2))
+            data: this.myData.map(i => this.handleNum(i.leases_house_dengjimianji))
-          },
+          }
-          {
-            name: '出租房产',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.leases_house_count)
-          },
-          {
-            name: '出租房产面积',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.leases_house_dengjimianji.toFixed(2))
-          },
-          {
-            name: '房产实际面积',
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.data.map(i => i.house_shijimianji.toFixed(2))
-          },
         ]
       })
     }
-  },
-  watch: {
   }
 }
 </script>