edit

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

@@ -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>

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,
+      time: item.time,
-      y: item.quantity,
+      quantity: item.quantity,
-      color: '#f50'
+      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;