74 lines
1.6 KiB
TypeScript
74 lines
1.6 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-operation-pillar',
|
|
templateUrl: './pillar.component.html',
|
|
styleUrls: ['./pillar.component.less']
|
|
})
|
|
export class OperationPillarComponent 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('number', {
|
|
nice: true,
|
|
});
|
|
this.chart.tooltip({
|
|
showMarkers: false,
|
|
shared: true,
|
|
});
|
|
|
|
this.chart
|
|
.interval()
|
|
.position('time*number')
|
|
.color('name')
|
|
.adjust([
|
|
{
|
|
type: 'dodge',
|
|
marginRatio: 0,
|
|
},
|
|
]);
|
|
|
|
this.chart.interaction('active-region');
|
|
|
|
this.chart.render();
|
|
}
|
|
|
|
} |