diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss index d44bb6a..93296e1 100644 --- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss +++ b/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; diff --git a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts index d655ff7..306463a 100644 --- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts +++ b/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 }] };