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

edit

Browse Source
This commit is contained in:
Taric Xin
2022-04-21 16:02:22 +08:00
parent 528a1ae90b
commit 466162e9c4
2 changed files with 86 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/routes/datatable/components/dataindex/dataindex.component.html
View File

@ -43,12 +43,12 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<div nz-col class="gutter-row" [nzSpan]="9">
<nz-card [nzTitle]="'订单类型比例'">
<g2-custom #g2custom delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<div nz-col class="gutter-row" [nzSpan]="15">
<nz-card [nzTitle]="'大区业绩完成情况'">
<!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
[slider]="false"></g2-timeline> -->
@ -57,7 +57,7 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<div nz-col class="gutter-row" [nzSpan]="9">
<nz-card [nzTitle]="'运单直付比例'">
<!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
(clickItem)="handleClick($event)" [lineWidth]="10">
@ -65,9 +65,10 @@
<g2-custom #BillDirectProportion delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<div nz-col class="gutter-row" [nzSpan]="15">
<nz-card [nzTitle]="'业绩完成情况'">
<g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar>
<!-- <g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
<g2-custom #SaleProportion delay="100"></g2-custom>
</nz-card>
</div>

84
src/app/routes/datatable/components/dataindex/dataindex.component.ts
View File

@ -9,6 +9,8 @@ import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
import { CurrencyPipe } from '@angular/common';
import { LOGS } from '_mock';
import { G2CustomComponent } from '@delon/chart/custom';
import { G2BarData } from '@delon/chart/bar';
import { GeometryLabelCfg } from '@antv/g2/lib/interface';
@Component({
selector: 'app-datatable-dataindex',
@ -20,6 +22,7 @@ export class DatatableDataindexComponent implements OnInit {
@ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
@ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
@ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
@ViewChild('SaleProportion', { static: false }) SaleProportion!: G2CustomComponent;
salesData: any[] = [];
totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
@ -94,6 +97,7 @@ export class DatatableDataindexComponent implements OnInit {
this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
if (res) {
this.salesData = this.formatBarData(res);
this.initBiaxialChart(this.SaleProportion['el'].nativeElement as any, this.salesData);
}
});
}
@ -267,6 +271,11 @@ export class DatatableDataindexComponent implements OnInit {
}
}
/**
* 构建大区业绩完成情况柱折双轴图
* @param el
* @param data
*/
private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
const chart = new Chart({
container: el,
@ -319,6 +328,66 @@ export class DatatableDataindexComponent implements OnInit {
chart.render();
}
/**
* 构建业绩完成情况柱折双轴图
* @param el
* @param data
*/
private initBiaxialChart(el: HTMLElement, data: any[]) {
const chart = new Chart({
container: el,
autoFit: true,
height: 400,
});
chart.data(data);
chart.scale({
pre: { alias: '同期业绩完成率', min: 0, max: 1 },
pre2: { min: 0, max: 1 },
quantity: { min: 0, max: 1000000 },
});
chart.legend({
custom: true,
items: [
{ value: 'quantity', name: '业绩量 (万)', marker: { symbol: 'hyphen', style: { stroke: '#3182bd', r: 15, lineWidth: 5 } } },
{ value: 'pre2', name: '业绩完成率', marker: { symbol: 'hyphen', style: { stroke: '#fdae6b', r: 15, lineWidth: 5 } } },
{ value: 'pre', name: '同期业绩完成率', marker: { symbol: 'hyphen', style: { stroke: '#ff4d4f', r: 15, lineWidth: 5 } } }
]
});
chart.axis('pre', {
grid: null,
title: null,
label: {
formatter: val => {
return +val * 100 + '%';
}
}
});
chart.axis('pre2', false);
chart.tooltip({
shared: true
});
chart.interval().position('time*quantity').label('quantity').color('#3182bd');
chart
.line()
.position('time*pre')
.label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#ff4d4f')
.size(3);
chart.point().position('time*pre').color('#ff4d4f').size(3).shape('circle');
chart
.line()
.position('time*pre2')
.label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#fdae6b')
.size(3);
chart.point().position('time*pre2').color('#fdae6b').size(3).shape('circle');
chart.interaction('active-region');
chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
chart.render();
}
private formatMiniAreaData(data: DataTotalVO) {
return {
totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
@ -329,6 +398,11 @@ export class DatatableDataindexComponent implements OnInit {
};
}
/**
* 初始化饼图数据格式
* @param data
* @returns
*/
private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
const rs: any[] = [];
@ -344,9 +418,11 @@ export class DatatableDataindexComponent implements OnInit {
private formatBarData(data: DataPerformanceTrendVO[]): any[] {
return data.map(item => ({
x: item.time,
y: item.quantity,
color: '#f50'
time: item.time,
quantity: item.quantity,
color: undefined,
pre: Math.floor(Math.random() * 100) / 100,
pre2: Math.floor(Math.random() * 100) / 100
}));
}
@ -356,7 +432,7 @@ export class DatatableDataindexComponent implements OnInit {
for (let i = 0; i < 20; i += 1) {
res.push({
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
y: Math.floor(Math.random() * 100) + 10
y: Math.floor(Math.random() * 1)
});
}
return res;