[修改]实时进展监管最底侧柱状图x轴名称限制一行3个字

src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss

@@ -34,7 +34,7 @@
     }
     .centerbox{
         width: 100%;
-        height: 45%;
+        height: 35%;
         display: flex;
         flex-direction: row;
         border-bottom: 1px gray solid;
@@ -48,10 +48,10 @@
         }
     }
     .bottombox{
-        /* width: 100%;
-        height: 45%; */
+        width: 100%;
+        height: 55%;
         .bottomspan{
-            height: 20%;
+            height: 10%;
             width:100%;
             span{
                 line-height: 50px;
@@ -60,7 +60,7 @@
             }
         }
         .bottomEcharts{
-            height: 80%;
+            height: 90%;
             width: 100%;
         }
         display: flex;

src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2021-05-08 09:42:43
  * @LastEditors: sueRimn
- * @LastEditTime: 2021-05-12 14:37:07
+ * @LastEditTime: 2021-05-13 14:04:20
  */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -181,7 +181,7 @@ export class RealMonitoringComponent implements OnInit {
           axisLabel:{
             //this.axisLabel,
             textStyle:{
-              fontSize :16,
+              fontSize :14,
               color:'#000000'
             }
             
@@ -191,7 +191,7 @@ export class RealMonitoringComponent implements OnInit {
           type: 'value',
           axisLabel:{
             textStyle:{
-              fontSize :16,
+              fontSize :14,
               color:'#000000'
             }
             
@@ -206,9 +206,8 @@ export class RealMonitoringComponent implements OnInit {
       }, */
       dataZoom:[
         {
-          type: 'inside'
-      }, {
-          type: 'slider'
+          type: 'slider',
+          bottom:2
       }
       ],
       series: [{
@@ -350,7 +349,7 @@ export class RealMonitoringComponent implements OnInit {
       grid: {
         //top: 10,
         containLabel:true,
-        bottom:10,
+        bottom:2,
         left:50
     },
     tooltip: {
@@ -366,17 +365,37 @@ export class RealMonitoringComponent implements OnInit {
           axisLabel:{
             //this.axisLabel,
             textStyle:{
-              fontSize :16,
+              fontSize :14,
               color:'#000000'
-            }
-            
+            },
+            interval: 0,
+            //rotate:38
+        formatter:function(value){
+          var ret = "";//拼接加\n返回的类目项 
+          var maxLength = 3;//每项显示文字个数
+          var valLength = value.length;//X轴类目项的文字个数
+          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+          if (rowN > 1) { //如果类目项的文字大于3,
+            for (var i = 0; i < rowN; i++) {
+              var temp = "";//每次截取的字符串
+              var start = i * maxLength;//开始截取的位置
+              var end = start + maxLength;//结束截取的位置
+              //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+              temp = value.substring(start, end) + "\n";
+              ret += temp;
+            } //凭借最终的字符串
+            return ret;
+          }else {
+          return value;
+          }
+        } //function
           }
       },
       yAxis: {
           type: 'value',
           axisLabel:{
             textStyle:{
-              fontSize :16,
+              fontSize :14,
               color:'#000000'
             }
             
@@ -384,9 +403,14 @@ export class RealMonitoringComponent implements OnInit {
       },
       dataZoom:[
         {
-          type: 'inside'
-      }, {
-          type: 'slider'
+          type: 'slider',
+          bottom:90,
+          backgroundColor:'rgba(47,69,84,-0.2)',
+          dataBackground:{
+            areaStyle:{
+              opacity:0
+            }
+          }
       }
       ],
       series: [{
@@ -400,7 +424,7 @@ export class RealMonitoringComponent implements OnInit {
           backgroundStyle: {
               color: 'rgba(220, 220, 220, 0.8)'
           },
-          barWidth :'38',
+          //barWidth :'38',
           //label: this.topTextlabel
       }]
     };