邵佳豪 4 years ago
parent
commit
c24e1a67e4
  1. 10
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.scss
  2. 70
      src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts

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

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

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

@ -4,11 +4,11 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2021-05-08 09:42:43 * @Date: 2021-05-08 09:42:43
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-05-12 14:37:07 * @LastEditTime: 2021-05-13 14:24:42
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms'; //import {Foimport { FormGroup, FormControl } from '@angular/forms';
import { EchartsDataService } from '../echarts-data.service'; import { EchartsDataService } from '../echarts-data.service';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@ -132,9 +132,9 @@ export class RealMonitoringComponent implements OnInit {
this.leftzhutu.dispose() this.leftzhutu.dispose()
this.dateyue = [] this.dateyue = []
this.dateNum = [] this.dateNum = []
this.zhiNameData = [] //this.zhiNameData = []
this.zhiNumData = [] //this.zhiNumData = []
this.addyuan = [] //this.addyuan = []
this.getechartsdata(false) this.getechartsdata(false)
} }
} }
@ -181,21 +181,25 @@ export class RealMonitoringComponent implements OnInit {
axisLabel:{ axisLabel:{
//this.axisLabel, //this.axisLabel,
textStyle:{ textStyle:{
fontSize: 16, fontSize :14,
color:'#000000' color:'#000000'
} }
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel:{ axisLabel:{
textStyle:{ textStyle:{
fontSize: 16, fontSize :14,
color:'#000000' color:'#000000'
} }
} }
}, },
/* tooltip: { /* tooltip: {
trigger: 'item', trigger: 'item',
@ -206,9 +210,8 @@ export class RealMonitoringComponent implements OnInit {
}, */ }, */
dataZoom: [ dataZoom: [
{ {
type: 'inside' type: 'slider',
}, { bottom:2
type: 'slider'
} }
], ],
series: [{ series: [{
@ -350,7 +353,7 @@ export class RealMonitoringComponent implements OnInit {
grid: { grid: {
//top: 10, //top: 10,
containLabel:true, containLabel:true,
bottom: 10, bottom:2,
left:50 left:50
}, },
tooltip: { tooltip: {
@ -366,17 +369,39 @@ export class RealMonitoringComponent implements OnInit {
axisLabel:{ axisLabel:{
//this.axisLabel, //this.axisLabel,
textStyle:{ textStyle:{
fontSize: 16, fontSize :14,
color:'#000000' 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: { yAxis: {
type: 'value', type: 'value',
axisLabel:{ axisLabel:{
textStyle:{ textStyle:{
fontSize: 16, fontSize :14,
color:'#000000' color:'#000000'
} }
@ -384,9 +409,14 @@ export class RealMonitoringComponent implements OnInit {
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside' type: 'slider',
}, { bottom:90,
type: 'slider' //backgroundColor:'rgba(47,69,84,-0.2)',
dataBackground:{
areaStyle:{
opacity:0
}
}
} }
], ],
series: [{ series: [{
@ -397,10 +427,8 @@ export class RealMonitoringComponent implements OnInit {
symbolSize: [65, 65], symbolSize: [65, 65],
data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData) data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData)
}, },
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' //barWidth :'38',
},
barWidth: '38',
//label: this.topTextlabel //label: this.topTextlabel
}] }]
}; };

Loading…
Cancel
Save