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 22c4a35..d375b00 100644 --- a/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts +++ b/src/app/statistic-analysis/real-monitoring/real-monitoring.component.ts @@ -4,11 +4,11 @@ * @Author: sueRimn * @Date: 2021-05-08 09:42:43 * @LastEditors: sueRimn - * @LastEditTime: 2021-05-12 14:37:07 + * @LastEditTime: 2021-05-13 14:24:42 */ import { Component, OnInit } from '@angular/core'; 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 { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; 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.dateyue = [] this.dateNum = [] - this.zhiNameData = [] - this.zhiNumData = [] - this.addyuan = [] + //this.zhiNameData = [] + //this.zhiNumData = [] + //this.addyuan = [] this.getechartsdata(false) } } @@ -175,27 +175,31 @@ export class RealMonitoringComponent implements OnInit { } }, xAxis: { - type: 'category', - data: this.dateyue, - //axisLabel: this.axisLabel, - axisLabel: { - //this.axisLabel, - textStyle: { - fontSize: 16, - color: '#000000' + type: 'category', + data: this.dateyue, + //axisLabel: this.axisLabel, + axisLabel:{ + //this.axisLabel, + textStyle:{ + fontSize :14, + color:'#000000' + } + } - } + }, yAxis: { - type: 'value', - axisLabel: { - textStyle: { - fontSize: 16, - color: '#000000' + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :14, + color:'#000000' + } + } - } + }, /* tooltip: { trigger: 'item', @@ -206,10 +210,9 @@ export class RealMonitoringComponent implements OnInit { }, */ dataZoom: [ { - type: 'inside' - }, { - type: 'slider' - } + type: 'slider', + bottom:2 + } ], series: [{ name: '数量', @@ -349,45 +352,72 @@ export class RealMonitoringComponent implements OnInit { this.bottomZhuoption = { grid: { //top: 10, - containLabel: true, - bottom: 10, - left: 50 - }, - tooltip: { - trigger: 'axis', - axisPointer: { + containLabel:true, + bottom:2, + left:50 + }, + tooltip: { + trigger: 'axis', + axisPointer: { type: 'none' } }, xAxis: { - type: 'category', - data: this.zhiNameData, - //axisLabel: this.axisLabel, - axisLabel: { - //this.axisLabel, - textStyle: { - fontSize: 16, - color: '#000000' + type: 'category', + data: this.zhiNameData, + //axisLabel: this.axisLabel, + axisLabel:{ + //this.axisLabel, + textStyle:{ + 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, - color: '#000000' + type: 'value', + axisLabel:{ + textStyle:{ + fontSize :14, + color:'#000000' + } + } - - } }, dataZoom: [ { - type: 'inside' - }, { - type: 'slider' - } + type: 'slider', + bottom:90, + //backgroundColor:'rgba(47,69,84,-0.2)', + dataBackground:{ + areaStyle:{ + opacity:0 + } + } + } ], series: [{ name: '数量', @@ -397,17 +427,15 @@ export class RealMonitoringComponent implements OnInit { symbolSize: [65, 65], data: this.EchartsData.qipao(this.tiaoshiPao, this.zhiNumData, this.zhiNameData) }, - backgroundStyle: { - color: 'rgba(220, 220, 220, 0.8)' - }, - barWidth: '38', - //label: this.topTextlabel - }] - }; - this.bottomzhu.setOption(this.bottomZhuoption); - /* this.bottomzhu.getZr().on('click',(params)=>{ - console.log(params) - }) */ + + //barWidth :'38', + //label: this.topTextlabel + }] + }; + this.bottomzhu.setOption(this.bottomZhuoption); + /* this.bottomzhu.getZr().on('click',(params)=>{ + console.log(params) + }) */ + } + } - -}