From 466162e9c44ea5e6f8fd5b4a4706c385c0e080e0 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Thu, 21 Apr 2022 16:02:22 +0800 Subject: [PATCH 1/2] edit --- .../dataindex/dataindex.component.html | 11 +-- .../dataindex/dataindex.component.ts | 84 ++++++++++++++++++- 2 files changed, 86 insertions(+), 9 deletions(-) diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.html b/src/app/routes/datatable/components/dataindex/dataindex.component.html index f1f4a0b5..cdeed077 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.html +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.html @@ -43,12 +43,12 @@
-
+
-
+
@@ -57,7 +57,7 @@
-
+
+
diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.ts b/src/app/routes/datatable/components/dataindex/dataindex.component.ts index 62bd3816..c827c3b2 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.ts +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.ts @@ -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; From 8f6f58097ccebb3e67dde7867640c029b635c435 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Thu, 21 Apr 2022 16:03:37 +0800 Subject: [PATCH 2/2] edit --- .../components/invoice-detail/invoice-detail.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.html b/src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.html index 160bf708..30583c58 100644 --- a/src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.html +++ b/src/app/routes/ticket-management/components/invoice-detail/invoice-detail.component.html @@ -108,7 +108,7 @@ {{ item.billLTypeLabel }}: {{ item.vatmoney |currency }} - vatmoney +