pref：优化报表导出趋势图样式

 .wrapper {
 .wrapper {
-  margin: 60px;
-  display: grid;
-  justify-content: space-between;
-  grid-template-columns: repeat(2, 400px);
-  grid-gap: 40px;
-  grid-template-rows: 400px 400px;
+  margin: 10px 60px 60px 60px;
 }
 }
 
 
 .inner {
 .inner {

@@ -9,15 +9,25 @@
       title="报表趋势图"
       title="报表趋势图"
       :showOkBtn="false"
       :showOkBtn="false"
     >
     >
-      <div class="wrapper">
-        <div v-if="initChartData.length > 0">
-          <div class="inner item" v-for="(item, index) in initChartData" :key="index">
+      <div :class="[initChartData.length % 2 !== 0 ? '' : 'wrapper']">
+        <div
+          v-if="initChartData.length > 0"
+          :class="[initChartData.length % 2 !== 0 ? '' : 'chart-style']"
+        >
+          <div
+            :class="[
+              initChartData.length % 2 !== 0 ? '' : 'inner',
+              initChartData.length % 2 !== 0 ? '' : 'item',
+            ]"
+            v-for="(item, index) in initChartData"
+            :key="index"
+          >
             <p style="display: none">{{ item }}</p>
             <p style="display: none">{{ item }}</p>
             <div :id="`chart${index}`" :style="{ height, width }"></div>
             <div :id="`chart${index}`" :style="{ height, width }"></div>
           </div>
           </div>
         </div>
         </div>
         <div v-else style="display: flex; justify-content: center; align-items: center">
         <div v-else style="display: flex; justify-content: center; align-items: center">
-          <div style="position: relative; left: 13rem; top: 8rem">暂无数据</div>
+          <div style="position: relative; left: 0rem; top: 3rem">暂无数据</div>
         </div>
         </div>
       </div>
       </div>
     </BasicModal>
     </BasicModal>
@@ -110,18 +120,19 @@
             },
             },
             toolbox: {},
             toolbox: {},
             grid: {
             grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
+              left: '8%',
+              right: '8%',
+              bottom: '12%',
               containLabel: true,
               containLabel: true,
             },
             },
             dataZoom: [
             dataZoom: [
               {
               {
                 type: 'slider',
                 type: 'slider',
                 show: true,
                 show: true,
-                start: 0,
-                end: 30,
-                xAxisIndex: [0],
+                startValue: 0,
+                endValue: 5,
+                height: '30',
+                bottom: '4%',
               },
               },
             ],
             ],
             xAxis: {
             xAxis: {
@@ -130,9 +141,19 @@
               boundaryGap: false,
               boundaryGap: false,
               axisPointer: { type: 'shadow' },
               axisPointer: { type: 'shadow' },
               axisLabel: {
               axisLabel: {
-                color: '#333',
+                interval: 0, 
+                rotate: 65,
+                textStyle: {
+                  color: '#000',
+                  fontSize: 10,
+                },
+              },
+              axisLine: {
+                show: true,
                 interval: 0,
                 interval: 0,
-                rotate: 90,
+                lineStyle: {
+                  color: 'RGB(210,221,217)',
+                },
               },
               },
             },
             },
             yAxis: {
             yAxis: {
@@ -155,4 +176,11 @@
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
   @import url('./ReportPreviewModal.less');
   @import url('./ReportPreviewModal.less');
+  .chart-style {
+    display: flex;
+    flex-wrap: wrap;
+    width: 825px;
+    margin-top: 10px;
+    justify-content: space-between;
+  }
 </style>
 </style>