66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
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-busitable-curve',
|
|
templateUrl: './curve.component.html',
|
|
styleUrls: ['./curve.component.less']
|
|
})
|
|
export class BusitableCurveComponent 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 {
|
|
|
|
}
|
|
reRender() {
|
|
this.chart.data(this.chartData);
|
|
this.chart.render();
|
|
}
|
|
render(el: ElementRef<HTMLDivElement>): void {
|
|
this.el = el.nativeElement
|
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
this.chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 500,
|
|
});
|
|
|
|
this.chart.data(this.chartData);
|
|
this.chart.scale({
|
|
year: {
|
|
range: [0, 1],
|
|
},
|
|
value: {
|
|
min: 0,
|
|
nice: true,
|
|
},
|
|
});
|
|
|
|
this.chart.tooltip({
|
|
showCrosshairs: true, // 展示 Tooltip 辅助线
|
|
shared: true,
|
|
});
|
|
|
|
this.chart.line().position('time*value').label('value');
|
|
this.chart.point().position('time*value');
|
|
|
|
this.chart.render();
|
|
}
|
|
|
|
} |