126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
|
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
|
|
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
|
import { format } from 'date-fns';
|
|
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
|
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
|
|
import { Chart } from '@antv/g2';
|
|
const DataSet = require('@antv/data-set');
|
|
@Component({
|
|
selector: 'app-datatable-compliance-index',
|
|
templateUrl: './index.component.html',
|
|
styleUrls: ['./index.component.less'],
|
|
providers: [DatePipe]
|
|
})
|
|
export class DatatableComplianceIndexComponent implements OnInit {
|
|
@ViewChild('sf', { static: false })
|
|
sf!: SFComponent;
|
|
ui!: SFUISchema;
|
|
schema: SFSchema = {};
|
|
|
|
mode = 'year';
|
|
date: any = null;
|
|
dateFormat = 'yyyy-MM-dd';
|
|
time: any = ['2022-01-01 00:00:00']
|
|
constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
|
|
|
|
ngOnInit(): void {
|
|
this.initSF();
|
|
}
|
|
|
|
changeData(){
|
|
if(this.mode === 'year') {
|
|
this.dateFormat = 'yyyy'
|
|
} else if(this.mode === 'month') {
|
|
this.dateFormat = 'yyyy-MM'
|
|
} else {
|
|
this.dateFormat = 'yyyy-MM-dd'
|
|
}
|
|
}
|
|
|
|
onChange(result: any) {
|
|
if(this.mode === 'year') {
|
|
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
|
} else if(this.mode === 'month') {
|
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
|
}
|
|
}
|
|
|
|
initSF() {
|
|
this.schema = {
|
|
properties: {
|
|
name: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '网络货运人'
|
|
}
|
|
},
|
|
name2: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '部门'
|
|
}
|
|
},
|
|
name3: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
placeholder: '业务员'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.ui = {
|
|
'*': {
|
|
grid: { span: 4 }
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
data = [
|
|
{ Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
|
|
{ Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
|
|
{ Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
|
|
{ Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
|
|
{ Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
|
|
{ Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
|
|
];
|
|
render(el: ElementRef<HTMLDivElement>) {
|
|
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
const chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 400
|
|
});
|
|
// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
|
|
const data = [
|
|
{x: '1991', z: 'a', y: 1},
|
|
{x: '1991', z: 'b', y: 2},
|
|
{x: '1991', z: 'c', y: 3},
|
|
|
|
{x: '1992', z: 'a', y: 11},
|
|
{x: '1992', z: 'b', y: 22},
|
|
{x: '1992', z: 'c', y: 33},
|
|
|
|
{x: '1993', z: 'a', y: 1},
|
|
{x: '1993', z: 'b', y: 2},
|
|
{x: '1993', z: 'c', y: 3}
|
|
];
|
|
|
|
chart.data(data);
|
|
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
|
|
chart.line().position('x*y').color('z');
|
|
// 在x*y的坐标上按z值绘制圆点
|
|
chart.point().position('x*y').size(4).color('z').shape('circle');
|
|
chart.render();
|
|
}
|
|
}
|