fix: 修复echarts图表尺寸异常的问题

7 files changed, 49 insertions, 32 deletions

diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss
index ffdc8ecb..e390e466 100644
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -20,12 +20,17 @@
   }
 }
 .chart__loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: absolute;
+  height: calc(100% - 50px);
+  top: 50px;
+  width: 100%;
   background-color: #fefefe;
 
   i {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
     font-size: 30px;
     color: #aaa;
   }
diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue
index 35cee22c..92fd40be 100644
--- a/src/components/charts/ChartMap.vue
+++ b/src/components/charts/ChartMap.vue
@@ -9,7 +9,7 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body" v-show="!loading">
+    <div class="cn-chart__body">
       <slot></slot>
     </div>
     <div class="cn-chart__body chart__loading" v-show="loading">
diff --git a/src/components/charts/ChartSingleValue.vue b/src/components/charts/ChartSingleValue.vue
index b875b2e1..4633078c 100644
--- a/src/components/charts/ChartSingleValue.vue
+++ b/src/components/charts/ChartSingleValue.vue
@@ -4,10 +4,10 @@
     <div class="single-value-icon__box" >
       <div class="single-value__icon"><i :class="icon"></i></div>
     </div>
-    <div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-if="loading">
+    <div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
-    <div class="single-value__content" v-if="type === 51" v-show="!loading">
+    <div class="single-value__content" v-if="type === 51">
       <div class="content__data">
         <slot name="data"></slot>
       </div>
@@ -15,7 +15,7 @@
         <slot name="title"></slot>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 52" v-show="!loading">
+    <div class="single-value__content" v-if="type === 52">
       <div class="content__title">
         <slot name="title"></slot>
       </div>
@@ -26,7 +26,7 @@
         <slot name="chart"></slot>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 53" v-show="!loading">
+    <div class="single-value__content" v-if="type === 53">
       <div class="content__title"></div>
       <div class="content__data"></div>
     </div>
diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue
index 58a16ab8..d0507bb4 100644
--- a/src/components/charts/ChartTable.vue
+++ b/src/components/charts/ChartTable.vue
@@ -12,7 +12,7 @@
     <div class="cn-chart__body chart__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
-    <div class="cn-chart__body" v-show="!loading" v-no-data="noData">
+    <div class="cn-chart__body" v-no-data="noData">
       <el-table
           style="width: 100%"
           tooltip-effect="light"
diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue
index 9658e739..96b9194f 100644
--- a/src/components/charts/EchartsFrame.vue
+++ b/src/components/charts/EchartsFrame.vue
@@ -9,13 +9,13 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData" v-show="!loading">
+    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData">
       <slot></slot>
     </div>
     <div class="cn-chart__body chart__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
-    <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}" v-show="!loading">
+    <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}">
       <slot name="footer"></slot>
     </div>
   </div>
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index f1d9289f..eb2472d2 100644
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -109,6 +109,7 @@
   }
 
   &>.cn-chart {
+    position: relative;
     background-color: #FFFFFF;
     border: 1px solid #E7EAED;
     box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
@@ -129,6 +130,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      flex-shrink: 0;
       padding: 10px 20px 10px 18px;
       height: 50px;
       font-size: 16px;
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index f5454921..2b5fea17 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -284,7 +284,7 @@ export default {
           if (chartParams) {
             this.loadMap(this.polygonSeries)
           }
-          // TODO 优化：缓存地图，重新查询时只更改数据不再次初始化
+          // TODO 优化：缓存地图，重新查询时只更改数据，不再次初始化
         } else if (this.isEcharts) {
           const dom = document.getElementById(`chart${this.chartInfo.id}`)
           !this.myChart && (this.myChart = echarts.init(dom))
@@ -340,9 +340,6 @@ export default {
                     this.errorInfo = response.msg || response.message || 'Unknown'
                   }
                   this.myChart.setOption(this.chartOption)
-                  this.$nextTick(() => {
-                    this.myChart.resize()
-                  })
                 })
               } else {
                 this.loading = false
@@ -350,7 +347,12 @@ export default {
             }).catch(() => {
               this.singleValue.value = ''
             }).finally(() => {
-              setTimeout(() => { this.loading = false }, 250)
+              setTimeout(() => {
+                this.loading = false
+                this.$nextTick(() => {
+                  this.echartsResize()
+                })
+              }, 250)
             })
           }
         } else if (this.isTabs) {
@@ -692,11 +694,13 @@ export default {
           this.errorInfo = response.msg || response.message || 'Unknown'
         }
         this.myChart.setOption(this.chartOption)
-        this.$nextTick(() => {
-          this.myChart.resize()
-        })
       }).finally(() => {
-        setTimeout(() => { this.loading = false }, 250)
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
       })
     },
     initRelationShip (chartParams) {
@@ -717,11 +721,13 @@ export default {
           this.chartOption.series[0].links = links
         }
         this.myChart.setOption(this.chartOption)
-        this.$nextTick(() => {
-          this.myChart.resize()
-        })
       }).finally(() => {
-        setTimeout(() => { this.loading = false }, 250)
+        setTimeout(() => {
+          this.loading = false
+          setTimeout(() => {
+            this.myChart.resize()
+          })
+        }, 250)
       })
 
       const vm = this
@@ -810,11 +816,13 @@ export default {
           this.errorInfo = response.msg || response.message || 'Unknown'
         }
         this.myChart.setOption(this.chartOption)
-        this.$nextTick(() => {
-          this.myChart.resize()
-        })
       }).finally(() => {
-        setTimeout(() => { this.loading = false }, 250)
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
       })
     },
     initEchartsWithPieTable (chartParams) {
@@ -856,9 +864,6 @@ export default {
             this.chartOption.legend.type = 'scroll'
           }
           this.myChart.setOption(this.chartOption)
-          this.$nextTick(() => {
-            this.myChart.resize()
-          })
           if (!this.$_.isEmpty(data)) {
             get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
               if (response2.code === 200) {
@@ -876,7 +881,12 @@ export default {
           this.errorInfo = response.msg || response.message || 'Unknown'
         }
       }).finally(() => {
-        setTimeout(() => { this.loading = false }, 250)
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
       })
       // legend点击事件
       this.myChart.off('legendselectchanged')