diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 34092a5..0aa51d3 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -5,7 +5,7 @@
         <div class="chart-title">各单位设备安装情况数量统计</div>
       </el-col>
     </el-row>
-    <div>
+    <div v-show="showDeviceType">
       <el-row :gutter="20" type="flex" justify="end">
         <el-col :span="8" style="margin-right: 30px">
           <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
@@ -19,7 +19,7 @@
       </el-row>
     </div>
     <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+      <ve-histogram :loading="loading" :data="chartData" :extend="extend" :settings="chartSettings" height="440px"/>
     </div>
   </div>
 </template>
@@ -27,54 +27,59 @@
 <script>
 import { getDeviceType } from '@/api/device'
 import { deviceStaticsByDept } from '@/api/dataStatics'
+import 'v-charts/lib/style.css'
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      series: {
-        label: { show: true, position: 'top' }
-      }
-    }
-    this.grid = {
-      right: 60
-    }
-    this.title = {
-      text: '设备数量统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        'barCategoryGap': 5
-      },
-      barWidth: 15,
-      labelMap: {
-        'deptName': '权属单位',
-        'deviceCount': '设备数量'
-      },
-      dimension: ['deptName'],
-      metrics: ['deviceCount']
-    }
     return {
       listQuery: {
         deviceType: ''
-      },
-      deviceTypeList: [],
-      rawData: '',
+      }, // 查询条件
+      showDeviceType: true, // 是否显示选择设备类型选项
+      deviceTypeList: [], // 设备类型列表，下拉选项
       chartData: {
-        columns: ['deptName', 'deviceCount'],
-        rows: []
-      }
+        columns: ['deptName', 'deviceCount'], // 维度和指标
+        rows: [] // 数据集合
+      }, // 数据
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        } // 设置字段映射
+      }, // 配置项
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          max: 10 // y轴最大值
+        },
+        series: {
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      }, // 扩展配置项
+      loading: true // 加载状态
     }
   },
-  mounted() {
+  created() {
     this.fetchDeviceType()
     this.fetchData()
   },
+  activated() {
+    this.fetchData()
+  },
   methods: {
     // 获取设备类型
     fetchDeviceType() {
       getDeviceType(this.listQuery).then(response => {
         this.deviceTypeList = [{
-          name: '全部',
+          name: '全部设备',
           value: ''
         }]
         // 过滤掉该单位不支持的设备类型
@@ -90,9 +95,33 @@
       })
     },
     fetchData() {
-      console.log('fetchData')
+      this.loading = true
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        // 获取数据的最大值，来确定y轴显示范围
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) { return item.deviceCount }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { max: 10 }
+        } else {
+          this.extend.yAxis = {}
+        }
+        // 解决文字较长无法全部水平展示问题：判断有几个柱需要显示，若大于6个让X轴文字倾斜30度
+        if (this.chartData.rows.length > 6) {
+          this.extend.xAxis = {
+            axisLabel: {
+              rotate: 30,
+              margin: 30,
+              textStyle: {
+                align: 'center'
+              }
+            }
+          }
+        } else {
+          this.extend.xAxis = {}
+        }
+        // 设置柱最大宽度
+        this.extend.series = { barMaxWidth: 35 }
+        this.loading = false
       })
     }
   }

diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 34092a5..0aa51d3 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -5,7 +5,7 @@
         <div class="chart-title">各单位设备安装情况数量统计</div>
       </el-col>
     </el-row>
-    <div>
+    <div v-show="showDeviceType">
       <el-row :gutter="20" type="flex" justify="end">
         <el-col :span="8" style="margin-right: 30px">
           <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
@@ -19,7 +19,7 @@
       </el-row>
     </div>
     <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+      <ve-histogram :loading="loading" :data="chartData" :extend="extend" :settings="chartSettings" height="440px"/>
     </div>
   </div>
 </template>
@@ -27,54 +27,59 @@
 <script>
 import { getDeviceType } from '@/api/device'
 import { deviceStaticsByDept } from '@/api/dataStatics'
+import 'v-charts/lib/style.css'
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      series: {
-        label: { show: true, position: 'top' }
-      }
-    }
-    this.grid = {
-      right: 60
-    }
-    this.title = {
-      text: '设备数量统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        'barCategoryGap': 5
-      },
-      barWidth: 15,
-      labelMap: {
-        'deptName': '权属单位',
-        'deviceCount': '设备数量'
-      },
-      dimension: ['deptName'],
-      metrics: ['deviceCount']
-    }
     return {
       listQuery: {
         deviceType: ''
-      },
-      deviceTypeList: [],
-      rawData: '',
+      }, // 查询条件
+      showDeviceType: true, // 是否显示选择设备类型选项
+      deviceTypeList: [], // 设备类型列表，下拉选项
       chartData: {
-        columns: ['deptName', 'deviceCount'],
-        rows: []
-      }
+        columns: ['deptName', 'deviceCount'], // 维度和指标
+        rows: [] // 数据集合
+      }, // 数据
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        } // 设置字段映射
+      }, // 配置项
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          max: 10 // y轴最大值
+        },
+        series: {
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      }, // 扩展配置项
+      loading: true // 加载状态
     }
   },
-  mounted() {
+  created() {
     this.fetchDeviceType()
     this.fetchData()
   },
+  activated() {
+    this.fetchData()
+  },
   methods: {
     // 获取设备类型
     fetchDeviceType() {
       getDeviceType(this.listQuery).then(response => {
         this.deviceTypeList = [{
-          name: '全部',
+          name: '全部设备',
           value: ''
         }]
         // 过滤掉该单位不支持的设备类型
@@ -90,9 +95,33 @@
       })
     },
     fetchData() {
-      console.log('fetchData')
+      this.loading = true
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        // 获取数据的最大值，来确定y轴显示范围
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) { return item.deviceCount }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { max: 10 }
+        } else {
+          this.extend.yAxis = {}
+        }
+        // 解决文字较长无法全部水平展示问题：判断有几个柱需要显示，若大于6个让X轴文字倾斜30度
+        if (this.chartData.rows.length > 6) {
+          this.extend.xAxis = {
+            axisLabel: {
+              rotate: 30,
+              margin: 30,
+              textStyle: {
+                align: 'center'
+              }
+            }
+          }
+        } else {
+          this.extend.xAxis = {}
+        }
+        // 设置柱最大宽度
+        this.extend.series = { barMaxWidth: 35 }
+        this.loading = false
       })
     }
   }
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index a43b0b2..78c1b66 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -6,57 +6,56 @@
       </el-col>
     </el-row>
     <el-row>
-      <ve-pie :data="chartData" :grid="grid" :legend="legend" :settings="chartSettings"/>
+      <ve-pie :loading="loading" :data="chartData" :legend="legend" :settings="chartSettings" :extend="extend" height="440px"/>
     </el-row>
   </div>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/dataStatics'
-
+import 'v-charts/lib/style.css'
 export default {
   name: 'DeviceCountByType',
   data() {
-    this.extend = {
-      series: {
-        label: { show: true, position: 'right' }
-      }
-    }
-    this.legend = {
-      bottom: '10px'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deviceType': '设备类型',
-        'deviceCount': '设备数量'
-      },
-      dimension: ['deviceType'],
-      metrics: ['deviceCount']
-    }
     return {
       chartData: {
-        columns: ['deviceType', 'deviceCount'],
-        rows: []
-      }
+        columns: ['deviceType', 'deviceCount'], // 维度和指标
+        rows: [] // 数据集合
+      }, // 数据
+      legend: {
+        top: 'bottom'
+      }, // 图例配置
+      extend: {
+      }, // 扩展配置
+      chartSettings: {
+        dataType: function(v) {
+          return v + ' 个'
+        }, // 格式化显示数据
+        labelMap: {
+          'deviceType': '设备类型',
+          'deviceCount': '设备数量'
+        },
+        label: {
+          show: true, position: 'outer', alignTo: 'edge'
+        }// 显示label
+      },
+      loading: true // 加载状态
     }
   },
-  mounted() {
-    // TODO:待调试真接口
+  created() {
     this.fetchData()
-    // this.chartData.rows = [
-    //   { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
-    //   { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
-    //   { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
-    //   { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
-    //   { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
-    //   { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
-    //   { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
-    // ]
+  },
+  mounted() {
+  },
+  activated() {
+    this.fetchData()
   },
   methods: {
     fetchData() {
+      this.loading = true
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
+        this.loading = false
       })
     }
   }

diff --git a/src/views/deviceStatics/components/deviceCountByDept.vue b/src/views/deviceStatics/components/deviceCountByDept.vue
index 34092a5..0aa51d3 100644
--- a/src/views/deviceStatics/components/deviceCountByDept.vue
+++ b/src/views/deviceStatics/components/deviceCountByDept.vue
@@ -5,7 +5,7 @@
         <div class="chart-title">各单位设备安装情况数量统计</div>
       </el-col>
     </el-row>
-    <div>
+    <div v-show="showDeviceType">
       <el-row :gutter="20" type="flex" justify="end">
         <el-col :span="8" style="margin-right: 30px">
           <el-select v-model="listQuery.deviceType" class="select-right" size="mini" placeholder="设备类型" clearable @change="fetchData">
@@ -19,7 +19,7 @@
       </el-row>
     </div>
     <div>
-      <ve-histogram :data="chartData" :grid="grid" :extend="extend" :settings="chartSettings"/>
+      <ve-histogram :loading="loading" :data="chartData" :extend="extend" :settings="chartSettings" height="440px"/>
     </div>
   </div>
 </template>
@@ -27,54 +27,59 @@
 <script>
 import { getDeviceType } from '@/api/device'
 import { deviceStaticsByDept } from '@/api/dataStatics'
+import 'v-charts/lib/style.css'
 export default {
   name: 'DeviceCountByDept',
   data() {
-    this.extend = {
-      series: {
-        label: { show: true, position: 'top' }
-      }
-    }
-    this.grid = {
-      right: 60
-    }
-    this.title = {
-      text: '设备数量统计'
-    }
-    this.chartSettings = {
-      itemStyle: {
-        'barCategoryGap': 5
-      },
-      barWidth: 15,
-      labelMap: {
-        'deptName': '权属单位',
-        'deviceCount': '设备数量'
-      },
-      dimension: ['deptName'],
-      metrics: ['deviceCount']
-    }
     return {
       listQuery: {
         deviceType: ''
-      },
-      deviceTypeList: [],
-      rawData: '',
+      }, // 查询条件
+      showDeviceType: true, // 是否显示选择设备类型选项
+      deviceTypeList: [], // 设备类型列表，下拉选项
       chartData: {
-        columns: ['deptName', 'deviceCount'],
-        rows: []
-      }
+        columns: ['deptName', 'deviceCount'], // 维度和指标
+        rows: [] // 数据集合
+      }, // 数据
+      chartSettings: {
+        labelMap: {
+          'deptName': '权属单位',
+          'deviceCount': '设备数量（个）'
+        } // 设置字段映射
+      }, // 配置项
+      extend: {
+        xAxis: {
+          axisLabel: {
+            rotate: 30,
+            margin: 30,
+            textStyle: {
+              align: 'center'
+            }
+          }
+        },
+        yAxis: {
+          max: 10 // y轴最大值
+        },
+        series: {
+          barMaxWidth: 35 // 最大柱宽度
+        }
+      }, // 扩展配置项
+      loading: true // 加载状态
     }
   },
-  mounted() {
+  created() {
     this.fetchDeviceType()
     this.fetchData()
   },
+  activated() {
+    this.fetchData()
+  },
   methods: {
     // 获取设备类型
     fetchDeviceType() {
       getDeviceType(this.listQuery).then(response => {
         this.deviceTypeList = [{
-          name: '全部',
+          name: '全部设备',
           value: ''
         }]
         // 过滤掉该单位不支持的设备类型
@@ -90,9 +95,33 @@
       })
     },
     fetchData() {
-      console.log('fetchData')
+      this.loading = true
       deviceStaticsByDept(this.listQuery).then(response => {
         this.chartData.rows = response.data
+        // 获取数据的最大值，来确定y轴显示范围
+        const maxValue = Math.max.apply(Math, response.data.map(function(item) { return item.deviceCount }))
+        if (maxValue < 10) {
+          this.extend.yAxis = { max: 10 }
+        } else {
+          this.extend.yAxis = {}
+        }
+        // 解决文字较长无法全部水平展示问题：判断有几个柱需要显示，若大于6个让X轴文字倾斜30度
+        if (this.chartData.rows.length > 6) {
+          this.extend.xAxis = {
+            axisLabel: {
+              rotate: 30,
+              margin: 30,
+              textStyle: {
+                align: 'center'
+              }
+            }
+          }
+        } else {
+          this.extend.xAxis = {}
+        }
+        // 设置柱最大宽度
+        this.extend.series = { barMaxWidth: 35 }
+        this.loading = false
       })
     }
   }
diff --git a/src/views/deviceStatics/components/deviceCountByType.vue b/src/views/deviceStatics/components/deviceCountByType.vue
index a43b0b2..78c1b66 100644
--- a/src/views/deviceStatics/components/deviceCountByType.vue
+++ b/src/views/deviceStatics/components/deviceCountByType.vue
@@ -6,57 +6,56 @@
       </el-col>
     </el-row>
     <el-row>
-      <ve-pie :data="chartData" :grid="grid" :legend="legend" :settings="chartSettings"/>
+      <ve-pie :loading="loading" :data="chartData" :legend="legend" :settings="chartSettings" :extend="extend" height="440px"/>
     </el-row>
   </div>
 </template>
 
 <script>
 import { deviceStaticsByType } from '@/api/dataStatics'
-
+import 'v-charts/lib/style.css'
 export default {
   name: 'DeviceCountByType',
   data() {
-    this.extend = {
-      series: {
-        label: { show: true, position: 'right' }
-      }
-    }
-    this.legend = {
-      bottom: '10px'
-    }
-    this.chartSettings = {
-      labelMap: {
-        'deviceType': '设备类型',
-        'deviceCount': '设备数量'
-      },
-      dimension: ['deviceType'],
-      metrics: ['deviceCount']
-    }
     return {
       chartData: {
-        columns: ['deviceType', 'deviceCount'],
-        rows: []
-      }
+        columns: ['deviceType', 'deviceCount'], // 维度和指标
+        rows: [] // 数据集合
+      }, // 数据
+      legend: {
+        top: 'bottom'
+      }, // 图例配置
+      extend: {
+      }, // 扩展配置
+      chartSettings: {
+        dataType: function(v) {
+          return v + ' 个'
+        }, // 格式化显示数据
+        labelMap: {
+          'deviceType': '设备类型',
+          'deviceCount': '设备数量'
+        },
+        label: {
+          show: true, position: 'outer', alignTo: 'edge'
+        }// 显示label
+      },
+      loading: true // 加载状态
     }
   },
-  mounted() {
-    // TODO:待调试真接口
+  created() {
     this.fetchData()
-    // this.chartData.rows = [
-    //   { 'deviceType': '井盖状态监测仪', 'deviceCount': 1393, '下单用户': 1093, '下单率': 0.32 },
-    //   { 'deviceType': '液位监测仪', 'deviceCount': 3530, '下单用户': 3230, '下单率': 0.26 },
-    //   { 'deviceType': '燃气智能监测终端', 'deviceCount': 2923, '下单用户': 2623, '下单率': 0.76 },
-    //   { 'deviceType': '开挖监测仪', 'deviceCount': 1723, '下单用户': 1423, '下单率': 0.49 },
-    //   { 'deviceType': '有害气体监测仪', 'deviceCount': 3792, '下单用户': 3492, '下单率': 0.323 },
-    //   { 'deviceType': '水质监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 },
-    //   { 'deviceType': '流量监测仪', 'deviceCount': 2, '下单用户': 4293, '下单率': 0.78 }
-    // ]
+  },
+  mounted() {
+  },
+  activated() {
+    this.fetchData()
   },
   methods: {
     fetchData() {
+      this.loading = true
       deviceStaticsByType().then(response => {
         this.chartData.rows = response.data
+        this.loading = false
       })
     }
   }
diff --git a/src/views/deviceStatics/deviceStatics.vue b/src/views/deviceStatics/deviceStatics.vue
index 3f04678..ed511fa 100644
--- a/src/views/deviceStatics/deviceStatics.vue
+++ b/src/views/deviceStatics/deviceStatics.vue
@@ -21,6 +21,7 @@
     DeviceCountByType
   },
   data() {
+    return {}
   }
 }
 </script>