81 lines
1.7 KiB
TypeScript
81 lines
1.7 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-datatable-customindex-curve',
|
|
templateUrl: './curve.component.html',
|
|
styleUrls: ['./curve.component.less']
|
|
})
|
|
export class DatatableCustomindexCurveComponent 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() {
|
|
setTimeout(() => {
|
|
this.chart.data(this.chartData);
|
|
this.chart.render();
|
|
}, 1000)
|
|
}
|
|
render(el: ElementRef<HTMLDivElement>): void {
|
|
this.el = el.nativeElement
|
|
setTimeout(() => {
|
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
|
},500)
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
this.chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 500,
|
|
});
|
|
|
|
this.chart.data(this.chartData);
|
|
this.chart.scale({
|
|
time: {
|
|
range: [0, 1],
|
|
},
|
|
number: {
|
|
nice: true,
|
|
},
|
|
});
|
|
|
|
this.chart.tooltip({
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
});
|
|
|
|
this.chart.axis('number', {
|
|
label: {
|
|
formatter: (val: any) => {
|
|
return val;
|
|
},
|
|
},
|
|
});
|
|
|
|
this.chart
|
|
.line()
|
|
.position('time*number')
|
|
.color('name')
|
|
|
|
|
|
this.chart.render();
|
|
|
|
}
|
|
|
|
} |