首页折线图显示修改

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" style="min-height:200px">
+        <div class="pd-10" v-show="activeIndex == 1" style="min-height:250px">
           <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:200px">
+        <div class="pd-10" v-show="activeIndex == 2" style="height:250px">
           <div v-if="collapseData2.length == 0" class="flex flex-center">
             <div>
               <img src="/img/welIndex/empty.png" alt="">
@@ -449,6 +449,7 @@ export default {
       await this.queryProjectPfx();
       const line = new Area('container', {
         data: this.LineData,
+        
         xField: 'project',
         yField: 'value',
         seriesField: 'category',
@@ -460,15 +461,35 @@ export default {
             symbol:'circle'
           }
         },
+
         autoFit:true,
-        scrollbar: {
-          type: 'vertical'
-        },
+     
+ 
         xAxis:{
-          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
+            autoHide:true,
+          //  autoHide: { type: 'equidistance', cfg: { minGap: 1} },
+            autoFit:false,
+            rotate: 0.3,
+            autoEllipsis: true,
+           
+          },
+        
+
         }
       });
       line.render();
@@ -481,10 +502,6 @@ export default {
         xField: 'project',
         yField: 'value',
         seriesField: 'category',
-        /** 设置颜色 */
-        //color: ['#1ca9e6', '#f88c24'],
-        /** 设置间距 */
-        // marginRatio: 0.1,
         label: {
           // 可手动配置 label 数据标签位置
           position: 'middle', // 'top', 'middle', 'bottom'
@@ -497,6 +514,7 @@ export default {
             // 数据标签文颜色自动调整
             { type: 'adjust-color' },
           ],
+      
         },
         legend: {
           position: 'top-left',
@@ -510,10 +528,6 @@ export default {
           type: 'bottom'
         },
          xAxis:{
-          // label:{
-          //   autoRotate:true,
-          //   autoHide:false,
-          // }
            label: {
             offset: 30, // 设置坐标轴文本 label 距离坐标轴线的距离
             textStyle: {
@@ -523,9 +537,12 @@ export default {
               fontWeight: 'bold', // 文本粗细
               rotate: 30,
               textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
+              
             }, // 文本样式，支持回调
             autoRotate: true, // 是否需要自动旋转，默认为 true
+            autoHide:false,
             rotate: 0.3,
+            autoEllipsis: true
           }
 
         }