Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

666

Browse Source
This commit is contained in:
heqinghang
2022-04-01 11:15:45 +08:00
parent 9128d9f9a5
commit 09e4aae936
9 changed files with 174 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/routes/datatable/components/financetable/curve/curve.component.html
View File

@ -1,5 +1,2 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<nz-divider></nz-divider>
<g2-custom delay="100" (render)="render2($event)"></g2-custom>

191
src/app/routes/datatable/components/financetable/curve/curve.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
import { DataService } from '../../../services/data.service';
// import DataSet from '@antv/data-set';
@ -9,160 +9,75 @@ import { Chart } from '@antv/g2';
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
export class FinanceTableCurveComponent implements OnInit {
constructor(private service: DataService, private ngZone: NgZone) {}
export class FinanceTableCurveComponent implements OnInit,OnChanges {
el: any;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
ngOnInit(): void {}
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
}
ngOnInit(): void {
}
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
this.chart.render();
}, 1000)
}
render(el: ElementRef<HTMLDivElement>): void {
this.ngZone.runOutsideAngular(() => this.initBar(el.nativeElement));
this.el = el.nativeElement
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 1000)
}
private initBar(el: HTMLElement): void {
const data = [
{ name: '已收金额（元）', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: '已收金额（元）', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: '已收金额（元）', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: '已收金额（元）', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: '已收金额（元）', 月份: 'May', 月均降雨量: 47 },
{ name: '已收金额（元）', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: '已收金额（元）', 月份: 'Jul.', 月均降雨量: 24 },
{ name: '已收金额（元）', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: '已付运费（元）', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: '已付运费（元）', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: '已付运费（元）', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: '已付运费（元）', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: '已付运费（元）', 月份: 'May', 月均降雨量: 52.6 },
{ name: '已付运费（元）', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: '已付运费（元）', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: '已付运费（元）', 月份: 'Aug.', 月均降雨量: 42.4 }
];
const chart = new Chart({
private init(el: HTMLElement): void {
this.chart = new Chart({
container: el,
autoFit: true,
height: 500
});
chart.data(data);
chart.scale('月均降雨量', {
nice: true
});
chart.tooltip({
showMarkers: false,
shared: true
});
// 图表下方图形文字自定义
chart.legend({
items: [
{
name: '已收金额（元）',
value: 'node_load1',
marker: {
symbol: 'circle',
style: { fill: '#6395f9' }
}
},
{
name: '已付运费（元）',
value: 'node_load1',
marker: {
symbol: 'circle',
style: { fill: '#62daab' }
}
}
]
height: 500,
});
chart
.interval()
.position('月份*月均降雨量')
.color('name')
.adjust([
{
type: 'dodge',
marginRatio: 0
}
]);
chart.render();
}
render2(el: ElementRef<HTMLDivElement>): void {
this.ngZone.runOutsideAngular(() => this.initCurve(el.nativeElement));
}
private initCurve(el: HTMLElement): void {
const chart = new Chart({
container: el,
autoFit: true,
height: 400
});
// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
const data = [
{ data: '1月', label: '平均附加费率', value: 5 },
{ data: '2月', label: '平均附加费率', value: 10 },
{ data: '3月', label: '平均附加费率', value: 25 },
{ data: '4月', label: '平均附加费率', value: 35 },
{ data: '5月', label: '平均附加费率', value: 15 },
{ data: '6月', label: '平均附加费率', value: 5 },
{ data: '7月', label: '平均附加费率', value: 95 },
{ data: '8月', label: '平均附加费率', value: 45 }
];
chart.data(data);
//刻度自定义
chart.scale({
data: {
range: [0, 1]
this.chart.data(this.chartData);
this.chart.scale({
time: {
range: [0, 1],
},
number: {
nice: true,
},
value: {
min: 0,
nice: true
}
});
// 图表下方图形文字自定义
chart.legend({
items: [
{
name: '平均附加费率',
value: 'node_load1',
marker: {
symbol: 'circle',
style: { fill: '#6193f7' }
}
}
]
});
// 提示自定义
chart.tooltip({
this.chart.tooltip({
showCrosshairs: true,
shared: true
shared: true,
});
//数据格式化
chart.axis('value', {
this.chart.axis('number', {
label: {
formatter: val => {
return val + ' %';
}
}
formatter: (val: any) => {
return val;
},
},
});
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
chart
this.chart
.line()
.position('data*value')
.color('label')
.tooltip('label*value', (name: any, value: any) => {
return {
name: name,
value: value + '%'
};
});
// 在x*y的坐标上按z值绘制圆点
// chart.point().position('data*value').size(4).color('label').shape('circle');
chart.render();
.position('time*number')
.color('name')
this.chart.render();
}
}

9
src/app/routes/datatable/components/financetable/financetable.component.html
View File

@ -64,5 +64,12 @@
</div>
</div>
</ng-template>
<app-financetable-curve></app-financetable-curve>
<div nz-row [nzGutter]="64">
<div nz-col class="gutter-row" [nzSpan]="12">
<app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
</div>
</div>
</nz-card>

35
src/app/routes/datatable/components/financetable/financetable.component.ts
View File

@ -4,6 +4,8 @@ import { SFSchema } from '@delon/form';
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
import { DataService } from '../../services/data.service';
import { differenceInCalendarDays } from 'date-fns';
import { OperationCurveComponent } from '../operationtable/curve/curve.component';
import { OperationPillarComponent } from '../operationtable/pillar/pillar.component';
@Component({
selector: 'app-datatable-financetable',
@ -12,6 +14,8 @@ import { differenceInCalendarDays } from 'date-fns';
providers: [DatePipe]
})
export class DatatableFinancetableComponent implements OnInit {
@ViewChild('curve') private readonly curve!: OperationCurveComponent;
@ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
@ -24,8 +28,9 @@ export class DatatableFinancetableComponent implements OnInit {
timeNext: any = ['2022-01-01 00:00:00']
today = new Date();
enterpriseInfoId = ''
enterpriseInfoIdPie = ''
interManlist: any = []
chartData: any = {}
flag = false;
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '客户预存款', index: 'czcgje',render: 'czcgje', className: 'text-center' },
@ -63,13 +68,37 @@ export class DatatableFinancetableComponent implements OnInit {
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void {
this.initData()
this.initData();
this.initPillarData();
}
initPillarData(){
let type = 1
if(this.mode === 'year') {
type = 1
} else if(this.mode === 'month') {
type = 2
}
const params: any = {
time: this.timeNext,
type,
enterpriseInfoId: this.enterpriseInfoId
};
this.flag = true
this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
if (res) {
this.chartData = res
if(this.flag) {
this.pillar.reRender()
this.curve.reRender()
}
}
})
}
initData() {
this.service.getNetworkFreightForwarder().subscribe(res => {
this.interManlist = res
this.enterpriseInfoId = res[0].value
this.enterpriseInfoIdPie = res[0].value
})
}

1
src/app/routes/datatable/components/financetable/pillar/pillar.component.html Normal file
View File

@ -0,0 +1 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>

0
src/app/routes/datatable/components/financetable/pillar/pillar.component.less Normal file
View File

75
src/app/routes/datatable/components/financetable/pillar/pillar.component.ts Normal file
View File

@ -0,0 +1,75 @@
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-financetable-pillar',
templateUrl: './pillar.component.html',
styleUrls: ['./pillar.component.less']
})
export class FinancetablePillarComponent 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);
console.log(this.chartData)
this.chart.render();
}, 1000)
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
setTimeout(() => {
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('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();
}
}

4
src/app/routes/datatable/datatable.module.ts
View File

@ -26,6 +26,7 @@ import { BusitableCurveComponent } from './components/busitable/busiindex/curve/
import { OperationPillarComponent } from './components/operationtable/pillar/pillar.component';
import { OperationCurveComponent } from './components/operationtable/curve/curve.component';
import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
import { FinancetablePillarComponent } from './components/financetable/pillar/pillar.component';
const COMPONENTS: Type<void>[] = [
DatatableDataindexComponent,
@ -54,7 +55,8 @@ const COMPONENTS: Type<void>[] = [
OperationPillarComponent,
OperationCurveComponent,
DatatableReportingFundInfoComponent,
FinanceTableCurveComponent
FinanceTableCurveComponent,
FinancetablePillarComponent
]

2
src/app/routes/datatable/services/data.service.ts
View File

@ -42,6 +42,8 @@ export class DataService extends BaseService {
// 查询货主报表
$api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`;
// 查询货主报表
$api_financialReportHistogram = `/api/sdc/report/financialReportHistogram`;
constructor(public injector: Injector) {
super(injector);