停车缺口分析左右分布

src/pages/index/components/gap_analysis.vue

@@ -1,36 +1,28 @@
 <template>
-  <div>
-    <div style="color: #d5d3d3" class="middle-map">
-      <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车缺口分析</div>
-<!--      <el-select clearable v-model="value" filterable remote reserve-keyword placeholder="请选择时段">-->
-<!--        <el-option-->
-<!--          v-for="item in options"-->
-<!--          :key="item.value"-->
-<!--          :label="item.label"-->
-<!--          :value="item.value">-->
-<!--        </el-option>-->
-<!--      </el-select>-->
-      <div style="height: 450px">
+  <div style="display: flex;">
+    <div style="color: #d5d3d3;width: 50%" class="middle-map">
+      <div align="center" style="color: #3498db;font-size: 14px;margin-bottom: 20px">停车缺口分析</div>
+      <div style="height: 500px">
         <div class="bottom" id="map"></div>
       </div>
     </div>
-      <div class="body-wrapper" style="height: 300px">
-        <div align="center" style="color: #3498db;font-size: 23px;margin-bottom: 20px">停车缺口变化趋势</div>
-        <linechart
-          :autoStop="false"
-          :top="30"
-          :bottom="30"
-          :left="40"
-          :legendTop="0"
-          :dataset="linedata"
-          yAxisName="%"
-          :tooltipFormat="lineTooltipFormat"
-          :encode="[
+    <div style="width: 50%; height: 500px">
+      <div align="center" style="color: #3498db;font-size: 14px;margin-bottom: 20px">停车缺口变化趋势</div>
+      <linechart
+        :autoStop="false"
+        :top="30"
+        :bottom="30"
+        :left="40"
+        :legendTop="0"
+        :dataset="linedata"
+        yAxisName="%"
+        :tooltipFormat="lineTooltipFormat"
+        :encode="[
               { x: 'month', y: 'lastAmount', seriesName: '缺口程度',bool:'true' },
             ]"
-          id="sxcyfzqk"
-        />
-      </div>
+        id="sxcyfzqk"
+      />
+    </div>
   </div>
 </template>