fix bug

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html

@@ -32,7 +32,7 @@
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
+          <nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
         </div>
       </div>
     </div>
@@ -43,9 +43,9 @@
       <div class="title">
         <div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
       </div>
-      <g2-custom delay="100" (render)="render($event)"></g2-custom>
+      <!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
      <!-- <app-busitable-curve></app-busitable-curve> -->
-      <!-- <app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve> -->
+     <app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve>
     </div>
     <div nz-col class="gutter-row" [nzSpan]="12">
       <div class="title">
@@ -53,7 +53,6 @@
       </div>
       <app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
     </div>
-
   </div>
   
 </nz-card>

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts

@@ -4,7 +4,8 @@ import { DatePipe, _HttpClient } from '@delon/theme';
 import { differenceInCalendarDays } from 'date-fns';
 import { DataService } from '../../../services/data.service';
 import { Chart } from '@antv/g2';
-import { BusitableCurveComponent } from './curve2/curve.component';
+import { BusitablePillarComponent } from './pillar/pillar.component';
+import { BusitableCurveComponent } from './curve/curve.component';
 
 @Component({
   selector: 'app-datatable-busiindex',
@@ -16,6 +17,7 @@ import { BusitableCurveComponent } from './curve2/curve.component';
 export class DatatableBusiindexComponent implements OnInit {
   @ViewChild('st') private readonly st!: STComponent;
   @ViewChild('curve') private readonly curve!: BusitableCurveComponent;
+  @ViewChild('pillar') private readonly pillar!: BusitablePillarComponent;
   type = 1;
   mode = 'year';
   date: any = null;
@@ -26,9 +28,8 @@ export class DatatableBusiindexComponent implements OnInit {
   timeNext: any = ['2022-01-01 00:00:00']
   dateFormat = 'yyyy-MM-dd';
   today = new Date();
-  chainRatio: any = []
   chartData: any = {}
-  el: any;
+  flag = false;
 
   columns: STColumn[] = [
     { title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
@@ -80,12 +81,11 @@ export class DatatableBusiindexComponent implements OnInit {
      };
     this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => {
       if (res) {
-        this.chainRatio = res.chainRatio
         this.chartData = res
-        setTimeout(() => {
-          this.ngZone.runOutsideAngular(() => this.init(this.el));
-        }, 1000);
-        
+        if(this.flag) {
+          this.pillar.reRender()
+          this.curve.reRender()
+        }
       }
     })
   }
@@ -124,6 +124,8 @@ export class DatatableBusiindexComponent implements OnInit {
     } else if(this.mode === 'month') {
       this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
     }
+    this.flag = true
+    this.initData()
   }
   disabledDate = (current: Date): boolean =>
     // Can not select days before today and today
@@ -131,38 +133,4 @@ export class DatatableBusiindexComponent implements OnInit {
   exportFun(){
 
   }
-
-  render(el: ElementRef<HTMLDivElement>): void {
-    this.el = el.nativeElement
-   
-  }
-
-  private init(el: HTMLElement): void {
-    const chart = new Chart({
-      container: el,
-      autoFit: true,
-      height: 500,
-    });
-
-    chart.data(this.chainRatio);
-    chart.scale({
-      year: {
-        range: [0, 1],
-      },
-      value: {
-        min: 0,
-        nice: true,
-      },
-    });
-
-    chart.tooltip({
-      showCrosshairs: true, // 展示 Tooltip 辅助线
-      shared: true,
-    });
-
-    chart.line().position('time*value').label('value');
-    chart.point().position('time*value');
-
-    chart.render();
-  }
 }

src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html

@@ -1 +1 @@
-<g2-custom delay="100" (render)="render($event)"></g2-custom>
+<g2-custom delay="200" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts

@@ -1,6 +1,4 @@
 import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
-import DataSet from '@antv/data-set';
 import { Chart } from '@antv/g2';
 import { DataService } from 'src/app/routes/datatable/services/data.service';
 @Component({
@@ -9,43 +7,44 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
   styleUrls: ['./curve.component.less']
 })
 export class BusitableCurveComponent implements OnInit, OnChanges {
-  @Input() chartData: any;
   el: any;
+  @Input() chartData: any;
+  chart: any;
   constructor(private service: DataService, private ngZone: NgZone) {
 
   }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
+
+    }
+  }
 
   ngOnInit(): void {
 
   }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.chartData) {
-      setTimeout(() => {
-        this.ngZone.runOutsideAngular(() => this.init(this.el));
-      }, 2000)
-
-    }
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 500)
   }
-
-
-  handleClick(data: G2MiniAreaClickItem): void {
-    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
-  }
-
   render(el: ElementRef<HTMLDivElement>): void {
     this.el = el.nativeElement
-   // this.ngZone.runOutsideAngular(() => this.init(this.el));
+    this.ngZone.runOutsideAngular(() => this.init(this.el));
   }
+
   private init(el: HTMLElement): void {
-    const chart = new Chart({
+    this.chart = new Chart({
       container: el,
       autoFit: true,
       height: 500,
     });
 
-    chart.data(this.chartData);
-    chart.scale({
+    this.chart.data(this.chartData);
+    this.chart.scale({
       year: {
         range: [0, 1],
       },
@@ -55,15 +54,15 @@ export class BusitableCurveComponent implements OnInit, OnChanges {
       },
     });
 
-    chart.tooltip({
+    this.chart.tooltip({
       showCrosshairs: true, // 展示 Tooltip 辅助线
       shared: true,
     });
 
-    chart.line().position('time*value').label('value');
-    chart.point().position('time*value');
+    this.chart.line().position('time*value').label('value');
+    this.chart.point().position('time*value');
 
-    chart.render();
+    this.chart.render();
   }
 
 }

src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html

@@ -1 +0,0 @@
-<g2-custom delay="100" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts

@@ -1,92 +0,0 @@
-import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
-import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
-import DataSet from '@antv/data-set';
-import { Chart } from '@antv/g2';
-import { DataService } from 'src/app/routes/datatable/services/data.service';
-@Component({
-  selector: 'app-busitable-curve',
-  templateUrl: './curve.component.html',
-  styleUrls: ['./curve.component.less']
-})
-export class BusitableCurveComponent implements OnInit, OnChanges {
-  @Input() chartData: any ;
-  el: any;
-  constructor(private service: DataService, private ngZone: NgZone) {
-
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    if(this.chartData){
-      setTimeout(()=>{
-        this.ngZone.runOutsideAngular(() => this.init(this.el));
-      }, 3000)
-     
-    }
-  }
-
-  ngOnInit(): void {
-    this.initData()
-  }
-  initData(){
-    this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => {
-      if (res) {
-        this.chartData = res
-        this.ngZone.runOutsideAngular(() => this.init(this.el));
-      }
-    })
-  }
-  render(el: ElementRef<HTMLDivElement>): void {
-    this.el = el.nativeElement
-  }
-  private init(el: HTMLElement): void {
-    const ds = new DataSet();
-    const dv = ds.createView().source(this.chartData);
-    dv.transform({
-      type: 'map',
-      callback: row => {
-        row.year = parseInt(row.year, 10);
-        return row;
-      }
-    }).transform({
-      type: 'regression',
-      method: 'polynomial',
-      fields: ['year', 'value'],
-      bandwidth: 0.1,
-      as: ['Year', 'Value']
-    });
-
-    const chart = new Chart({
-      container: el,
-      autoFit: true,
-      height: 500,
-      padding: [20, 40],
-    });
-
-    const view1 = chart.createView();
-    view1.data(this.chartData);
-    view1.scale('price', {
-      nice: true,
-    });
-    view1.tooltip({
-      showMarkers: false,
-      shared: true,
-    });
-
-    view1
-      .interval()
-      .position('month*price')
-      .color('name')
-      .adjust([
-        {
-          type: 'dodge',
-          marginRatio: 0,
-        },
-      ]);
-
-
-   // chart.interaction('active-region');
-    chart.render();
-
-  }
-}
-
-

src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html

@@ -1 +1 @@
-<g2-custom delay="100" (render)="render($event)"></g2-custom>
+<g2-custom delay="200" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts

@@ -7,48 +7,50 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
   styleUrls: ['./pillar.component.less']
 })
 export class BusitablePillarComponent implements OnInit, OnChanges {
-  
   el: any;
-  @Input() chartData: any ;
+  @Input() chartData: any;
+  chart: any;
   constructor(private service: DataService, private ngZone: NgZone) {
 
   }
   ngOnChanges(changes: SimpleChanges): void {
-    if(this.chartData){
-      setTimeout(()=>{
-        this.ngZone.runOutsideAngular(() => this.init(this.el));
-      }, 1000)
-     
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
+
     }
   }
 
   ngOnInit(): void {
-    
+
+  }
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 500)
   }
   render(el: ElementRef<HTMLDivElement>): void {
     this.el = el.nativeElement
+    this.ngZone.runOutsideAngular(() => this.init(this.el));
   }
 
-
   private init(el: HTMLElement): void {
-    const chart = new Chart({
+    this.chart = new Chart({
       container: el,
       autoFit: true,
       height: 500,
     });
-  
-    chart.data(this.chartData);
 
-    chart.tooltip({
+    this.chart.data(this.chartData);
+
+    this.chart.tooltip({
       showMarkers: false,
     });
 
-    chart.interval().position('time*number');
-
-    chart.interaction('element-active');
-
-    chart.render();
-
+    this.chart.interval().position('time*number');
+    this.chart.render();
   }
 
 }

src/app/routes/datatable/components/busitable/mantable/mantable.component.html

@@ -38,5 +38,4 @@
       </div>
     </div>
   </ng-template>
-  <app-datatable-curve></app-datatable-curve>
 </nz-card>