102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
/*
|
|
* @Description :
|
|
* @Version : 1.0
|
|
* @Author : Shiming
|
|
* @Date : 2022-04-28 20:27:07
|
|
* @LastEditors : Shiming
|
|
* @LastEditTime : 2022-05-07 10:16:08
|
|
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\index\\curve\\curve.component.ts
|
|
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
|
*/
|
|
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
|
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
|
|
|
|
// import DataSet from '@antv/data-set';
|
|
const DataSet = require('@antv/data-set');
|
|
import { Chart } from '@antv/g2';
|
|
import { DataService } from 'src/app/routes/datatable/services/data.service';
|
|
@Component({
|
|
selector: 'app-compliance-curve',
|
|
templateUrl: './curve.component.html',
|
|
styleUrls: ['./curve.component.less']
|
|
})
|
|
export class ComplianceCurveComponent 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(() => {
|
|
console.log(this.chartData)
|
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
|
}, 1000)
|
|
}
|
|
|
|
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: {
|
|
min: 0,
|
|
nice: true,
|
|
},
|
|
});
|
|
|
|
this.chart.tooltip({
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
});
|
|
|
|
this.chart.axis('proportion', {
|
|
label: {
|
|
formatter: (val: any) => {
|
|
return (val*100).toFixed(0)+ ' %';
|
|
},
|
|
},
|
|
});
|
|
|
|
this.chart
|
|
.line()
|
|
.position('situationDate*proportion')
|
|
.color('type')
|
|
.tooltip('proportion*type', function(name: any, value: any) {
|
|
return {
|
|
name: name*100+'%',
|
|
value: value
|
|
};
|
|
});
|
|
|
|
this.chart.render();
|
|
|
|
}
|
|
}
|