整治前后土地利用结构对比x轴数据显示

src/views/LandConsolidation/components/fxjg.vue

@@ -116,6 +116,7 @@ export default {
             params: {},
             region: "",
             result: [[], [], []],
+            rotate: 45,
           };
           res.data["3D"].map((ci, i) => {
             jdData.x_data.push(ci.key);

src/views/LandConsolidation/components/qhdb.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qhdb" v-loading="loading">
+  <div class="qhdb">
     <div class="tdTitle">整治前后土地利用结构对比</div>
     <div class="contrast" @click="contrast">空间对比</div>
     <div class="selectTab">
@@ -32,7 +32,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="echars">
+    <div class="echars" v-loading="loading">
       <barAndLine class="echart" ref="echartRef1" v-show="!tab1"></barAndLine>
       <sankey class="echart2" ref="echartRef2" v-show="tab1"></sankey>
     </div>
@@ -55,6 +55,7 @@ export default {
         legendmap: [{ type: "bar" }, { type: "bar" }, { type: "line" }],
         params: {},
         region: "",
+        rotate: 45,
       },
       dboptions: [
         { name: "地类变化", value: 0 },
@@ -182,12 +183,13 @@ export default {
   .echars {
     overflow-y: auto;
     overflow-x: hidden;
-    height: 260px;
-  }
-  .echart {
-    width: 810px !important;
-    height: 250px !important;
+    height: 280px;
+    .echart {
+      width: 810px !important;
+      height: 280px !important;
+    }
   }
+
   .echart2 {
     width: 810px !important;
     height: 400px !important;

src/views/cockpit/common/ThreeStackedBarAndLine.vue

@@ -44,7 +44,7 @@ export default {
           top: "30%",
           left: "6%",
           right: "6%",
-          bottom: "5%",
+          bottom: "2%",
           containLabel: true,
         },
         color: ["#186bb8", "#4ee1ac", "#efc943"],
@@ -151,6 +151,17 @@ export default {
         ],
         series: [],
       };
+
+      option.xAxis[0].axisLabel.interval = 0;
+      option.xAxis[0].axisLabel.rotate = obj.rotate || 0;
+      option.xAxis[0].axisLabel.margin = 20;
+      option.xAxis[0].axisLabel.formatter = function (value) {
+        // 使用\n手动换行，或者使用CSS样式white-space: normal;
+        return value.length > 4
+          ? value.slice(0, 4) + "..." // "\n" + value.slice(4)
+          : value;
+      };
+
       if (!obj.result) obj.result = [[], [], [], []];
       if (!obj.legend_data) obj.legend_data = ["", "", "", ""];
       if (!obj.legendmap)
@@ -184,6 +195,36 @@ export default {
           });
         }
       });
+      if (obj.dataZoom) {
+        option.dataZoom = [
+          {
+            show: true,
+            height: 12,
+            xAxisIndex: [0],
+            top: "92%",
+            startValue: 0,
+            endValue: 5,
+            handleIcon:
+              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleSize: "110%",
+            handleStyle: {
+              color: "#d3dee5",
+            },
+            textStyle: {
+              color: "#333",
+            },
+            borderColor: "#90979c",
+          },
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
+          },
+        ];
+      }
+
       this.chart.setOption(option);
       //         this.chart.on("legendselectchanged", function (params) {
       //     let iseyes = params.selected[params.name];

src/views/complianceAnalysis/components/scjgContent.vue

@@ -29,7 +29,7 @@
     </div>
     <barAndLine
       v-else-if="litem.scxstyle == 2"
-      class="echart"
+      class="echartbar"
       ref="echartRef"
       @echartClick="echartClick"
     ></barAndLine>
@@ -105,6 +105,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .content {
+  overflow-x: auto;
+  overflow-y: hidden;
   .litem {
     position: relative;
   }