自动调整高度

src/components/auto-height/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div ref="box" class="auto-height" :style="{height: height}">
+    <slot/>
+  </div>
+</template>
+<script>
+export default {
+  name: 'auto-height',
+  props: {
+    pre: {
+      type: Number,
+      default: .6
+    },
+    max: {
+      type: Number,
+      default: 400,
+    },
+    min: {
+      type: Number,
+      default: 200
+    }
+  },
+  methods: {
+   setSize() {
+      const width = this.$refs.box.offsetWidth
+      return Math.max(this.min, Math.min(Math.floor(width * this.pre), this.max)) + 'px'
+    },
+    resize() {
+      window.requestAnimationFrame(() => {
+        this.height = this.setSize()
+      })
+    },
+  },
+  mounted () {
+    window.addEventListener('resize', this.resize, false)
+    const event = new Event('resize')
+    window.dispatchEvent(event)
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.resize, false)
+  },
+  data() {
+    return {
+      height: '400px',
+    }
+  }
+}
+</script>

src/components/install.js

@@ -14,6 +14,7 @@ import descriptions from '@/components/Descriptions/Descriptions.vue'
 import remoteSearch from "@/components/remote-search"
 import tabRouter from '@/components/tab-router'
 import empty from '@/components/empty'
+import autoHeight from '@/components/auto-height'
 
 export default {
   install(Vue) {
@@ -28,5 +29,6 @@ export default {
     Vue.component(remoteSearch.name, remoteSearch)
     Vue.component(tabRouter.name, tabRouter)
     Vue.component(empty.name, empty)
+    Vue.component(autoHeight.name, autoHeight)
   }
 }

src/views/main/baseinfo/business.vue

@@ -13,7 +13,9 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+    <auto-height>
+      <ve-histogram style="width: 100%;" height="100%" :data="chartData"></ve-histogram>
+    </auto-height>
   </el-card>
 </template>
 <script>

src/views/main/baseinfo/curriculum.vue

@@ -13,7 +13,12 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-line :data="chartData"/>
+    <auto-height>
+      <ve-line :settings="{
+        area: true,
+        stack: { '课程': ['乐团课', 'VIP课', '网管课'] },
+      }" :data="chartData" height="100%"/>
+    </auto-height>
   </el-card>
 </template>
 <script>

src/views/main/baseinfo/hr.vue

@@ -13,7 +13,9 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+    <auto-height>
+      <ve-histogram style="width: 100%;" height="100%" :data="chartData"></ve-histogram>
+    </auto-height>
   </el-card>
 </template>
 <script>

src/views/main/baseinfo/index.vue

@@ -123,5 +123,8 @@ export default {
         margin-bottom: 20px;
       }
     }
+    /deep/ .el-card__body .statistic {
+      margin-bottom: 15px;
+    }
   }
 </style>

src/views/main/baseinfo/management.vue

@@ -13,7 +13,12 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-line :data="chartData"/>
+    <auto-height>
+      <ve-line :settings="{
+        area: true,
+        stack: { '金额': ['应收金额', '预收金额', '预付金额', '应付金额', '营收金额'] },
+      }" :data="chartData" height="100%"/>
+    </auto-height>
   </el-card>
 </template>
 <script>

src/views/main/baseinfo/operate.vue

@@ -13,7 +13,9 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram :data="chartData"></ve-histogram>
+    <auto-height>
+      <ve-histogram style="width: 100%;" height="100%" :data="chartData"></ve-histogram>
+    </auto-height>
   </el-card>
 </template>
 <script>

src/views/main/baseinfo/student.vue

@@ -13,7 +13,9 @@
         </span>
       </statistic-item>
     </statistic>
-    <ve-histogram style="width: 100%;" :data="chartData"></ve-histogram>
+    <auto-height>
+      <ve-histogram style="width: 100%;" height="100%" :data="chartData"></ve-histogram>
+    </auto-height>
   </el-card>
 </template>
 <script>