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

5 files changed, 12 insertions, 7 deletions

diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss
index e390e466..a2d23b45 100644
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -19,6 +19,12 @@
     font-weight:900;
   }
 }
+.cn-chart__single-value {
+  .chart__loading {
+    top: 0;
+    height: 100%;
+  }
+}
 .chart__loading {
   position: absolute;
   height: calc(100% - 50px);
@@ -28,9 +34,8 @@
 
   i {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: calc(50% - 15px);
+    top: calc(50% - 15px);
     font-size: 30px;
     color: #aaa;
   }
diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue
index 92fd40be..a09d27d2 100644
--- a/src/components/charts/ChartMap.vue
+++ b/src/components/charts/ChartMap.vue
@@ -12,7 +12,7 @@
     <div class="cn-chart__body">
       <slot></slot>
     </div>
-    <div class="cn-chart__body chart__loading" v-show="loading">
+    <div class="chart__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
     <div class="cn-chart__footer">
diff --git a/src/components/charts/ChartSingleValue.vue b/src/components/charts/ChartSingleValue.vue
index 4633078c..00dcc35d 100644
--- a/src/components/charts/ChartSingleValue.vue
+++ b/src/components/charts/ChartSingleValue.vue
@@ -4,7 +4,7 @@
     <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-show="loading">
+    <div class="chart__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
     <div class="single-value__content" v-if="type === 51">
diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue
index d0507bb4..c37c3d82 100644
--- a/src/components/charts/ChartTable.vue
+++ b/src/components/charts/ChartTable.vue
@@ -9,7 +9,7 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body chart__loading" v-show="loading">
+    <div class="chart__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
     <div class="cn-chart__body" v-no-data="noData">
diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue
index 96b9194f..1ec0e35d 100644
--- a/src/components/charts/EchartsFrame.vue
+++ b/src/components/charts/EchartsFrame.vue
@@ -12,7 +12,7 @@
     <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">
+    <div class="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}">