-

src/app/routes/datatable/components/dataindex/dataindex.component.html

@@ -1,5 +1,5 @@
 <!--
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-04-28 20:27:07
@@ -19,7 +19,7 @@
         </p>
       </ng-template>
       <ng-template #AdvanceDepositFooter>
-        <g2-custom #AdvanceDeposit delay="100"></g2-custom>
+        <g2-custom #AdvanceDeposit></g2-custom>
         <!-- <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
           (clickItem)="handleClick($event)">
         </g2-mini-area> -->
@@ -75,12 +75,12 @@
 </div>
 <div nz-row [nzGutter]="16">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <nz-card  acl  [acl-ability]="['dataindex-getBillTypeProportion']"><label class="chart_title">订单类型比例</label>
+    <nz-card acl [acl-ability]="['dataindex-getBillTypeProportion']"><label class="chart_title">订单类型比例</label>
       <g2-custom #g2custom delay="100"></g2-custom>
     </nz-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="18">
-    <nz-card  acl  [acl-ability]="['dataindex-getBillAmount']"><label class="chart_title">大区业绩完成情况</label>
+    <nz-card acl [acl-ability]="['dataindex-getBillAmount']"><label class="chart_title">大区业绩完成情况</label>
       <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
         [slider]="false"></g2-timeline> -->
       <g2-custom #RegionalPerforman delay="100"></g2-custom>
@@ -89,7 +89,7 @@
 </div>
 <div nz-row [nzGutter]="16">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <nz-card  acl  [acl-ability]="['dataindex-getWayBillDirectProportion']"> <label class="chart_title">运单直付比例</label>
+    <nz-card acl [acl-ability]="['dataindex-getWayBillDirectProportion']"> <label class="chart_title">运单直付比例</label>
       <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
         (clickItem)="handleClick($event)" [lineWidth]="10">
       </g2-pie> -->
@@ -97,11 +97,11 @@
     </nz-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="18">
-    <nz-card  acl  [acl-ability]="['dataindex-getBillPaymentAmount']">
+    <nz-card acl [acl-ability]="['dataindex-getBillPaymentAmount']">
       <label class="chart_title">业绩完成情况</label>
       <!-- <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
       <g2-custom #SaleProportion delay="100"></g2-custom>
 
     </nz-card>
   </div>
-</div>
+</div>

src/app/routes/datatable/components/dataindex/dataindex.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
 import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
@@ -18,7 +18,7 @@ import { GeometryLabelCfg } from '@antv/g2/lib/interface';
   styleUrls: ['./dataindex.component.less'],
   providers: [CurrencyPipe]
 })
-export class DatatableDataindexComponent implements OnInit {
+export class DatatableDataindexComponent implements OnInit, AfterViewInit {
   @ViewChild('AdvanceDeposit', { static: false }) AdvanceDeposit!: G2CustomComponent;
   @ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
   @ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
@@ -38,13 +38,16 @@ export class DatatableDataindexComponent implements OnInit {
 
   regionalPerformanceCompletion: DataPerformanceTrendVO[] = [];
 
-  constructor(private service: DataService, private currency: CurrencyPipe) {}
-
-  ngOnInit(): void {
+  constructor(private service: DataService, private currency: CurrencyPipe) { }
+  ngAfterViewInit(): void {
     this.initMiniAreaData();
     this.initOthersData();
   }
 
+  ngOnInit(): void {
+
+  }
+
   private initMiniAreaData() {
     // 客户预存款总额
     this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
@@ -79,8 +82,8 @@ export class DatatableDataindexComponent implements OnInit {
       if (res) {
         const billTypeDatas2 = this.formatCoordinateData(res);
         console.log(billTypeDatas2);
-        
-        this.initBillChart(this.g2custom['el'].nativeElement as any,billTypeDatas2);
+
+        this.initBillChart(this.g2custom['el'].nativeElement as any, billTypeDatas2);
       }
     });
     // 大区业绩完成情况
@@ -101,7 +104,6 @@ export class DatatableDataindexComponent implements OnInit {
       if (res) {
         const billTypeDatas = this.formatCoordinateData(res.map((item: any) => ({ ...item, billType: item.wayBillType })));
         console.log(billTypeDatas);
-        
         this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
       }
     });
@@ -145,7 +147,7 @@ export class DatatableDataindexComponent implements OnInit {
 
     chart.scale('percent', {
       formatter: val => {
-        val = (val * 100 ).toFixed(0)+ '%';
+        val = (val * 100).toFixed(0) + '%';
         return val;
       }
     });
@@ -202,7 +204,7 @@ export class DatatableDataindexComponent implements OnInit {
       .label('percent', percent => {
         return {
           content: data => {
-            return (percent * 100).toFixed(0)+`%`;
+            return (percent * 100).toFixed(0) + `%`;
           },
           style: { fontSize: 14 }
         };
@@ -351,6 +353,8 @@ export class DatatableDataindexComponent implements OnInit {
         }
         return {};
       });
+    console.log(chart);
+
     chart.render();
   }
 
@@ -503,7 +507,7 @@ export class DatatableDataindexComponent implements OnInit {
       });
     });
     console.log(rs);
-    
+
     return rs;
   }