档案统计 宽高自适应 重叠bug

src/views/components/echarts/catePie.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
-    <!-- 档案类别 -->
-    <div id="maincate" />
-  </div>
+  <!-- 档案类别 -->
+  <div id="maincate" :style="{height:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 
 export default {
   name: 'CatePie',
+  mixins: [resize],
   props: {
     cateData: {
       type: Array,
@@ -17,6 +17,19 @@ export default {
       default: function() {
         return []
       }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
     }
   },
   mounted() {
@@ -25,7 +38,7 @@ export default {
   methods: {
     drawChart() {
       const chartDom = document.getElementById('maincate')
-      const myChart = echarts.init(chartDom)
+      this.chart = echarts.init(chartDom)
       let option = null
       option = {
         tooltip: {
@@ -47,7 +60,7 @@ export default {
             name: '档案类别',
             type: 'pie',
             radius: ['20%', '50%'],
-            center: ['50%', '35%'], // 饼图位置
+            center: ['50%', '40%'], // 饼图位置
             roseType: 'area',
             avoidLabelOverlap: false, // 不重叠
             labelLine: {
@@ -81,15 +94,12 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#maincate {
-    width: 520px;
-    height:257px;
-  }
+
 </style>

src/views/components/echarts/lendAcross.vue

@@ -1,15 +1,14 @@
 <template>
-  <div>
-    <!-- 档案借阅 -->
-    <div id="mainlend" />
-  </div>
+  <!-- 档案借阅 -->
+  <div id="mainlend" :style="{height:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts'
-
+import resize from '@/views/dashboard/mixins/resize'
 export default {
   name: 'AcrossEcharts',
+  mixins: [resize],
   props: {
     lendData: {
       type: Array,
@@ -17,15 +16,32 @@ export default {
       default: function() {
         return []
       }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
     }
   },
   mounted() {
     this.drawChart()
+  },
+  beforeDestroy() {
+
   },
   methods: {
     drawChart() {
       const chartDom = document.getElementById('mainlend')
-      const myChart = echarts.init(chartDom)
+
+      this.chart = echarts.init(chartDom)
       let option = null
       option = {
         tooltip: {
@@ -119,15 +135,13 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#mainlend {
-    width: 520px;
-    height:257px;
-  }
+
 </style>

src/views/components/echarts/typePie.vue

@@ -1,15 +1,16 @@
 <template>
-  <div>
-    <!-- 档案类别 -->
-    <div id="maintype" />
-  </div>
+  <!-- 档案类别 -->
+  <div id="maintype" :style="{height:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 
 export default {
   name: 'TypePie',
+  mixins: [resize],
+
   props: {
     typeData: {
       type: Array,
@@ -17,6 +18,19 @@ export default {
       default: function() {
         return []
       }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
     }
   },
   mounted() {
@@ -25,7 +39,7 @@ export default {
   methods: {
     drawChart() {
       const chartDom = document.getElementById('maintype')
-      const myChart = echarts.init(chartDom)
+      this.chart = echarts.init(chartDom)
       let option = null
       option = {
         tooltip: {
@@ -44,7 +58,6 @@ export default {
             color: '#fff'
           }
         },
-        // color: ['#1CADAB', '#339CF'], // 饼 颜色
         series: [
           {
             name: '档案类型',
@@ -67,10 +80,7 @@ export default {
                 }
               }
             },
-            // label: {
-            //   show: false,
-            //   position: 'center'
-            // },
+
             emphasis: {
               label: {
                 show: false
@@ -87,15 +97,12 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#maintype {
-    width: 520px;
-    height:257px;
-  }
+
 </style>

src/views/system/archiveStatistics/index.vue

@@ -1,92 +1,95 @@
 <template>
   <div class="app-container" style="background-color: #031435;">
     <div>
-      <el-row :gutter="20" style="height:296px;">
+      <el-row :gutter="20">
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="top-row  container-wrap">
+          <div class="top-row  container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">档案借阅</p>
             </h3>
-            <div class="chart-wrapper">
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
               <lend-across :lend-data="lendData" />
             </div>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="top-row  container-wrap">
+          <div class="top-row  container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">档案类别</p>
             </h3>
-            <div class="chart-wrapper">
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
               <cate-pie :cate-data="cateData" />
             </div>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="top-row  container-wrap">
+          <div class="top-row  container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">档案类型</p>
             </h3>
-            <div class="chart-wrapper">
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
               <type-pie :type-data="typeData" />
             </div>
           </div>
         </el-col>
       </el-row>
       <!-- 中间 -->
-      <el-row :gutter="20" style="width:100%;padding:20px 0 20px 10px;" class="dpflex">
-        <el-col :xs="24" :sm="24" :lg="12" style="padding:0;margin-right:20px">
-          <div class="container-wrap">
+      <el-row class="center-box">
+        <el-col class="center-chart" style="margin-right:20px">
+          <div class="container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">出入库管理情况</p>
             </h3>
-            <BarEcharts />
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
+              <BarEcharts />
+            </div>
           </div>
         </el-col>
-        <el-col :xs="24" :sm="24" :lg="12" style="padding:0;margin-right: -10px">
-          <div class=" container-wrap">
+        <el-col class="center-chart">
+          <div class=" container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">档案检索排名</p>
             </h3>
-            <AcrossBar />
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
+              <AcrossBar />
+            </div>
           </div>
         </el-col>
 
       </el-row>
       <!-- 底部 -->
-      <el-row :gutter="20" style="height:296px;">
+      <el-row :gutter="20">
         <el-col :xs="24" :sm="24" :lg="25">
-          <div class=" container-wrap">
+          <div class="container-wrap" style="height:calc(25vh - 40px)">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class="table-title">
               <p class="title-arrow">档案实际情况</p>
             </h3>
-            <LineEchart />
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
+              <LineEchart />
+            </div>
           </div>
         </el-col>
-
       </el-row>
     </div>
   </div>
 </template>
 
 <script>
-// import RadarChart from '@/components/Echarts/RadarChart'
 import lendAcross from '@/views/components/echarts/lendAcross.vue'
 import catePie from '@/views/components/echarts/catePie.vue'
 import typePie from '@/views/components/echarts/typePie.vue'
-// import PieChart from '@/components/Echarts/PieChart'
 import BarEcharts from './module/barEcharts.vue'
 import AcrossBar from './module/acrossBar.vue'
 import LineEchart from './module/lineEchart.vue'
@@ -107,4 +110,16 @@ export default {
 .container-wrap{
   min-height:calc(100vh - 636px) ;
 }
+
+.center-box{
+  // width:100%;
+  margin:20px 0;
+  display: flex;
+  justify-content: space-between;
+  .center-chart{
+    padding:0;
+    height:100%;
+    flex: 1;
+  }
+}
 </style>

src/views/system/archiveStatistics/module/acrossBar.vue

@@ -1,22 +1,38 @@
 <template>
-  <div class="barEcharts">
-    <!-- 档案检索排名 -->
-    <div id="main2" />
-  </div>
+  <!-- 档案检索排名 -->
+  <div id="main2" :style="{height:height,width:width}" />
+
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 
 export default {
   name: 'AcrossEcharts',
+  mixins: [resize],
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
   mounted() {
     this.drawChart()
   },
   methods: {
     drawChart() {
       const chartDom = document.getElementById('main2')
-      const myChart = echarts.init(chartDom)
+      this.chart = echarts.init(chartDom)
       let option = null
       option = {
         tooltip: {
@@ -90,15 +106,12 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#main2 {
-    width: 765px;
-    height:257px;
-  }
+
 </style>

src/views/system/archiveStatistics/module/barEcharts.vue

@@ -1,15 +1,31 @@
 <template>
-  <div class="barEcharts">
-    <!-- 出入库管理情况 -->
-    <div id="main1" />
-  </div>
+
+  <div id="main1" :style="{height:height,width:width}" />
+
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 
 export default {
   name: 'BarEcharts',
+  mixins: [resize],
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
   mounted() {
     this.drawChart()
   },
@@ -17,7 +33,7 @@ export default {
     drawChart() {
       const app = {}
       const chartDom = document.getElementById('main1')
-      const myChart = echarts.init(chartDom)
+      this.chart = echarts.init(chartDom)
 
       let option = null
       const posList = [
@@ -79,7 +95,7 @@ export default {
             position: app.config.position,
             distance: app.config.distance
           }
-          myChart.setOption({
+          this.chart.setOption({
             series: [
               {
                 label: labelOption
@@ -216,15 +232,12 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  #main1 {
-    width: 765px;
-    height:257px;
-  }
+
 </style>

src/views/system/archiveStatistics/module/lineEchart.vue

@@ -1,22 +1,38 @@
 <template>
-  <div class="barEcharts">
-    <!-- 档案检索排名 -->
-    <div id="main3" />
-  </div>
+  <!-- 档案检索排名 -->
+  <div id="main3" :style="{height:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts'
+import resize from '@/views/dashboard/mixins/resize'
 
 export default {
   name: 'AcrossEcharts',
+  mixins: [resize],
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
   mounted() {
     this.drawChart()
+    window.addEventListener('resize', this.__resizeHandler)
   },
   methods: {
     drawChart() {
       const chartDom = document.getElementById('main3')
-      const myChart = echarts.init(chartDom)
+      this.chart = echarts.init(chartDom)
       let option = null
       option = {
         grid: { // 边距
@@ -118,16 +134,12 @@ export default {
           }
         ]
       }
-      option && myChart.setOption(option)
+      option && this.chart.setOption(option)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-#main3 {
-    width: 100%;
-    height:257px;
-    // color: #339cff;
-  }
+
 </style>