Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHaiYuan-AnXin

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,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)
+      }) */
+    }
+  
+  }