需求210 样式调整eta_comp.js

src/CustomElement/EtaChart.ce.vue

@@ -97,10 +97,10 @@ getChartData()
                 {{ params.language === 'en'?chartInfo.ChartNameEn: chartInfo.ChartName}}
             </span>
         </header>
-        <template v-if="haveData">
+        <div v-if="haveData" class="chart-wrapper">
             <div :id="chartBoxId" ref="chartContentEl" class="hz-chart-content"></div>
             <div class="mark" ref="markDom"></div>
-        </template>
+        </div>
         <div class="notfound" v-else>
             哎吆，你的图飞了，赶快去找管理员救命吧~
         </div>
@@ -159,23 +159,30 @@ div{
             width: 100%;
         }
     }
-    .hz-chart-content{
+    .chart-wrapper{
+        position: relative;
+        display: flex;
+        height: 100%;
         width: 100%;
-        flex: 1;
-    }
-    .mark{
-        position:absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        background-image: none;
-        background-position:center center;
-        background-repeat:  no-repeat;
-        background-size: contain;
-        pointer-events: none;
-        width: 80%;
-        height: 80%;
+        .hz-chart-content{
+            width: 100%;
+            flex: 1;
+        }
+        .mark{
+            position:absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            background-image: none;
+            background-position:center center;
+            background-repeat:  no-repeat;
+            background-size: contain;
+            pointer-events: none;
+            width: 80%;
+            height: 80%;
+        }
     }
+
     .notfound {
         flex: 1;
         overflow: hidden;