fix bug

src/app/routes/datatable/components/operationtable/curve/curve.component.spec.ts

@@ -1,24 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DatatableDataindexComponent } from './dataindex.component';
-
-describe('DatatableDataindexComponent', () => {
-  let component: DatatableDataindexComponent;
-  let fixture: ComponentFixture<DatatableDataindexComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DatatableDataindexComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DatatableDataindexComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/routes/datatable/components/operationtable/curve/curve.component.ts

@@ -1,131 +1,81 @@
-import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
-import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
-import { DataService } from '../../../services/data.service';
-import DataSet from '@antv/data-set';
+import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { Chart } from '@antv/g2';
+import { DataService } from 'src/app/routes/datatable/services/data.service';
 @Component({
-  selector: 'app-datatable-curve',
+  selector: 'app-operation-curve',
   templateUrl: './curve.component.html',
   styleUrls: ['./curve.component.less']
 })
-export class OperationtableCurveComponent implements OnInit {
-
+export class OperationCurveComponent implements OnInit, OnChanges {
+  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 {
 
   }
-
-
-
-
-  handleClick(data: G2MiniAreaClickItem): void {
-    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 1000)
   }
-
   render(el: ElementRef<HTMLDivElement>): void {
-    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+    this.el = el.nativeElement
+    setTimeout(() => {
+      this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 1000)
   }
-  private init(el: HTMLElement): void {
-    const data = [
-      { name: '订单数', month: '01', count: 150, },
-      { name: '订单数', month: '02', count: 288 },
-      { name: '订单数', month: '03', count: 393 },
-      { name: '订单数', month: '04', count: 814 },
-      { name: '订单数', month: '05', count: 47 },
-      { name: '承运数', month: '05', count: 124 },
-      { name: '订单数', month: '06', count: 203 },
-      { name: '承运数', month: '06', count: 203 },
-      { name: '订单数', month: '07', count: 24 },
-      { name: '订单数', month: '08', count: 356 },
-      { name: '承运数', month: '09', count: 124 }, 
-      { name: '承运数', month: '10', count: 232 },
-      { name: '承运数', month: '11', count: 345 },
-      { name: '承运数', month: '12', count: 997 }
-    ];
-    const dataPillar = [
-      { name: '应收金额(元)', month: '01', price: 18.9, },
-      { name: '应收金额(元)', month: '02', price: 28.8 },
-      { name: '应收金额(元)', month: '03', price: 39.3 },
-      { name: '应收金额(元)', month: '04', price: 81.4 },
-      { name: '应收金额(元)', month: '05', price: 47 },
-      { name: '应付金额(元)', month: '05', price: 12.4 },
-      { name: '应收金额(元)', month: '06', price: 20.3 },
-      { name: '应付金额(元)', month: '06', price: 20.3 },
-      { name: '应收金额(元)', month: '07', price: 24 },
-      { name: '应收金额(元)', month: '08', price: 35.6 },
-      { name: '应付金额(元)', month: '09', price: 12.4 }, 
-      { name: '应付金额(元)', month: '10', price: 23.2 },
-      { name: '应付金额(元)', month: '11', price: 34.5 },
-      { name: '应付金额(元)', month: '12', price: 99.7 }
-    ];
-    const ds = new DataSet();
-    const dv = ds.createView().source(data);
-    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({
+  private init(el: HTMLElement): void {
+    this.chart = new Chart({
       container: el,
       autoFit: true,
       height: 500,
-      padding: [20, 40],
     });
 
-    const view1 = chart.createView();
-    view1.data(dataPillar);
-    view1.scale('price', {
-      nice: true,
+    this.chart.data(this.chartData);
+    this.chart.scale({
+      time: {
+        range: [0, 1],
+      },
+      number: {
+        nice: true,
+      },
     });
-    view1.tooltip({
-      showMarkers: false,
+    
+    this.chart.tooltip({
+      showCrosshairs: true,
       shared: true,
     });
-
-    view1
-      .interval()
-      .position('month*price')
-      .color('name')
-      .adjust([
-        {
-          type: 'dodge',
-          marginRatio: 0,
+    
+    this.chart.axis('number', {
+      label: {
+        formatter: (val: any) => {
+          return val;
         },
-      ]);
-
-    const view2 = chart.createView();
-    // view2.axis('count', {
-    //   label: {
-    //     formatter: (val) => {
-    //       return val + ' °C';
-    //     },
-    //   },
-    // });
-    view2.data(data);
-    view2
+      },
+    });
+    
+    this.chart
       .line()
-      .position('month*count')
+      .position('time*number')
       .color('name')
-
-
-
-
-   // chart.interaction('active-region');
-    chart.render();
-
+    
+    
+    this.chart.render();
+    
   }
-}
-
 
+}