fix bug

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

@@ -1,8 +1,10 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, NgZone } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 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';
 
 @Component({
   selector: 'app-datatable-busiindex',
@@ -13,6 +15,7 @@ import { DataService } from '../../../services/data.service';
 })
 export class DatatableBusiindexComponent implements OnInit {
   @ViewChild('st') private readonly st!: STComponent;
+  @ViewChild('curve') private readonly curve!: BusitableCurveComponent;
   type = 1;
   mode = 'year';
   date: any = null;
@@ -23,7 +26,9 @@ export class DatatableBusiindexComponent implements OnInit {
   timeNext: any = ['2022-01-01 00:00:00']
   dateFormat = 'yyyy-MM-dd';
   today = new Date();
-  chartData: any = []
+  chainRatio: any = []
+  chartData: any = {}
+  el: any;
 
   columns: STColumn[] = [
     { title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
@@ -58,7 +63,7 @@ export class DatatableBusiindexComponent implements OnInit {
     return { ...params };
   }
 
-  constructor(public service: DataService, private datePipe: DatePipe) { }
+  constructor(public service: DataService, private datePipe: DatePipe,  private ngZone: NgZone) { }
   ngOnInit(): void {
     this.initData()
   }
@@ -73,9 +78,14 @@ export class DatatableBusiindexComponent implements OnInit {
       time: this.timeNext,
       type
      };
-    this.service.getPerformanceReportHistogram(params).subscribe(res => {
+    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);
+        
       }
     })
   }
@@ -122,4 +132,37 @@ export class DatatableBusiindexComponent implements OnInit {
 
   }
 
+  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();
+  }
 }