首页柱状图样式修改

src/views/wel/index.vue

@@ -23,7 +23,7 @@
         <div class="triangle-bottomleft" :class="{'b-b-b-w':activeIndex == 2}"></div>
       </div>
       <el-scrollbar class="flex1">
-        <div class="pd-10" v-show="activeIndex == 1" >
+        <div class="pd-10" v-show="activeIndex == 1" style="min-height:200px">
           <div v-if="collapseData1.length == 0" class="flex flex-center">
             <div>
               <img src="/img/welIndex/empty.png" alt="">
@@ -63,7 +63,7 @@
             没有更多数据了~
           </div>
         </div>
-        <div class="pd-10" v-show="activeIndex == 2" style="height:150px">
+        <div class="pd-10" v-show="activeIndex == 2" style="height:200px">
           <div v-if="collapseData2.length == 0" class="flex flex-center">
             <div>
               <img src="/img/welIndex/empty.png" alt="">
@@ -129,7 +129,7 @@
                 <span class="title-tip">(总计{{personAmount}}个)</span>
               </span>
             </div>
-            <div id="container2"></div>
+            <div id="container2" ></div>
           </div>
         </el-col>
         <el-col :span="8">
@@ -504,12 +504,30 @@ export default {
           marker:{
             symbol:'circle'
           }
+        },
+        // autoFit:true,
+        scrollbar: {
+          type: 'bottom'
         },
          xAxis:{
-          label:{
-            autoRotate:true,
-            autoHide:false,
+          // label:{
+          //   autoRotate:true,
+          //   autoHide:false,
+          // }
+           label: {
+            offset: 30, // 设置坐标轴文本 label 距离坐标轴线的距离
+            textStyle: {
+              textAlign: 'center', // 文本对齐方向，可取值为： start middle end
+              fill: '#404040', // 文本的颜色
+              fontSize: '12', // 文本大小
+              fontWeight: 'bold', // 文本粗细
+              rotate: 30,
+              textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
+            }, // 文本样式，支持回调
+            autoRotate: true, // 是否需要自动旋转，默认为 true
+            rotate: 0.3,
           }
+
         }
       });