update

src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html

@@ -27,7 +27,7 @@
         </nz-select>
     </div>
     <div nz-col nzSpan="3">
-        <nz-select style="width: 100%;"   nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
+        <nz-select style="width: 100%;"   nzPlaceHolder="选择主机资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
             <ng-container *ngFor="let item of hostList;">
                 <nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
             </ng-container>

src/main/webapp/app/netTopology/flow-trend/flow-trend.component.ts

@@ -42,6 +42,8 @@ export class FlowTrendComponent implements OnInit {
 
     //图表
     chartOption;
+    inEchartData;
+    outEchartData;
 
     constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
                 private message: NzMessageService,private datePipe:DatePipe) {
@@ -51,6 +53,7 @@ export class FlowTrendComponent implements OnInit {
         const today = new Date().getTime();
         this.obj.startTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 00:00:00";
         this.obj.endTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 23:59:59";
+        this.getGroup();
     }
 
     //获取分组
@@ -59,6 +62,8 @@ export class FlowTrendComponent implements OnInit {
             (res) => {
                 if (res.errCode == 10000) {
                     this.groupList = res.data;
+                    this.obj.groupid = this.groupList[0].groupid +"";
+                    this.onchange();
                 }
             }
         );
@@ -76,7 +81,7 @@ export class FlowTrendComponent implements OnInit {
             (res) => {
                 if (res.errCode == 10000) {
                     this.hostList = res.data;
-                    this.obj.hostid = this.hostList[0].hostList;
+                    this.obj.hostid = this.hostList[0].hostid +"";
                     this.getEcharts(null);
                 }
             }
@@ -96,9 +101,19 @@ export class FlowTrendComponent implements OnInit {
         this.topologySer.findTrendData(data).subscribe(
             (res) => {
                 if(res.errCode == 10000){
+                    if(res.data){
+                        this.inEchartData = res.data;
+                    }else{
+                        this.message.info("图表暂无数据");
+                    }
                     data.type = "out";
                     this.topologySer.findTrendData(data).subscribe(
                         (res)=>{
+                            if(res.data){
+                                this.outEchartData = res.data;
+                            }else{
+                                this.message.info("图表暂无数据");
+                            }
                             this.setEacharts();
                         }
                     )
@@ -109,23 +124,7 @@ export class FlowTrendComponent implements OnInit {
         );
     }
 
-    //
     setEacharts(){
-
-        let xAxisData = [];
-        let data1 = [];
-        let data2 = [];
-        let data3 = [];
-        let data4 = [];
-
-        for (let i = 0; i < 10; i++) {
-            xAxisData.push('Class' + i);
-            data1.push((Math.random() * 2).toFixed(2));
-            data2.push(-Math.random().toFixed(2));
-            data3.push((Math.random() * 5).toFixed(2));
-            data4.push((Math.random() + 0.3).toFixed(2));
-        }
-
         let itemStyle = {
             normal: {
             },
@@ -142,53 +141,62 @@ export class FlowTrendComponent implements OnInit {
             backgroundColor: '#eee',
             tooltip: {},
             xAxis: {
-                data: xAxisData,
-                name: 'X Axis',
+                data: this.inEchartData.map(e=>{
+                        return e.clockDate;
+                    }),
+                name: '时间',
                 silent: false,
                 axisLine: {onZero: true},
                 splitLine: {show: false},
-                splitArea: {show: false}
+                splitArea: {show: false},
+                axisLabel:{
+                    margin: 10,
+                    interval: 100000,
+                    showMinLabel: true,
+                    showMaxLabel: true,
+                    textStyle: {
+                        color: '#999',
+                        fontSize: 12,
+                    }
+                }
             },
             yAxis: {
                 inverse: true,
-                splitArea: {show: false}
+                splitArea: {show: false},
+                type : 'value',
+                axisLabel:{   //Y轴数据
+                    formatter:function(value){
+                        return Math.abs(value)/10000;   //负数取绝对值变正数
+                    },
+                    textStyle: {
+                        color: '#666'
+                    }
+                },
             },
             grid: {
                 left: 100
             },
             series: [
                 {
-                    name: 'bar',
-                    type: 'bar',
-                    stack: 'one',
-                    itemStyle: itemStyle,
-                    data: data1
-                },
-                {
-                    name: 'bar2',
+                    name: 'bar3',
                     type: 'bar',
                     stack: 'one',
                     itemStyle: itemStyle,
-                    data: data2
+                    data: this.inEchartData.map(e=>{
+                        return e.value_avg;
+                    })
                 },
                 {
                     name: 'bar3',
                     type: 'bar',
                     stack: 'two',
                     itemStyle: itemStyle,
-                    data: data3
-                },
-                {
-                    name: 'bar4',
-                    type: 'bar',
-                    stack: 'two',
-                    itemStyle: itemStyle,
-                    data: data4
+                    data: this.outEchartData.map(e=>{
+                        return -e.value_avg;
+                    })
                 }
             ]
         };
-
-         console.log(this.chartOption);
     }
 
     //获取流量