fix bug

src/app/routes/datatable/components/operationtable/pie/pie.component.ts

@@ -1,10 +1,7 @@
 import { 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';
+import { G2PieComponent, G2PieData } from '@delon/chart/pie';
 import { format } from 'date-fns';
-import { Chart, registerShape, Util } from '@antv/g2';
-import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
+import { Chart } from '@antv/g2';
 import { DataService } from '../../../services/data.service';
 
 @Component({
@@ -14,101 +11,27 @@ import { DataService } from '../../../services/data.service';
 })
 export class OperationtablePieComponent implements OnInit {
   @ViewChild('pie', { static: false }) pie!: G2PieComponent;
-  chartData: G2TimelineData[] = [];
-  visitData = this.genData();
-  salesData = this.genData();
-  salesPieData: G2PieData[] = [];
-  total = '';
+  chartData: any = [];
+  el: any;
 
   constructor(private service: DataService, private ngZone: NgZone) {
-
   }
 
   ngOnInit(): void {
-    this.refreshPie();
-    this.initLineData()
+    this.initData()
   }
-  initLineData() {
-    for (let i = 0; i < 20; i += 1) {
-      this.chartData.push({
-        time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
-        y1: Math.floor(Math.random() * 100) + 1000,
-        y2: Math.floor(Math.random() * 100) + 10,
-      });
-    }
-  }
-  private genData(): G2MiniAreaData[] {
-    const beginDay = new Date().getTime();
-    const res: G2MiniAreaData[] = [];
-    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,
-      });
-    }
-    return res;
-  }
-
-  refresh(): void {
-    this.visitData = this.genData();
-  }
-  refreshPie(): void {
-    const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
-    this.salesPieData = [
-      {
-        x: '家用电器',
-        y: rv(),
-      },
-      {
-        x: '食用酒水',
-        y: rv(),
-      },
-      {
-        x: '个护健康',
-        y: rv(),
-      },
-      {
-        x: '服饰箱包',
-        y: rv(),
-      },
-      {
-        x: '母婴产品',
-        y: rv(),
-      },
-    ];
-    if (Math.random() > 0.5) {
-      this.salesPieData.push({
-        x: '其他',
-        y: rv(),
-      });
-    }
-    this.total = `&yen ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
-    if (this.pie) {
-      // 等待组件渲染
-      setTimeout(() => {
-        console.log('a')
-        this.pie.changeData()
-      });
-    }
-  }
-
-  handleClick(data: G2MiniAreaClickItem): void {
-    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
-  }
-  format(val: number): string {
-    return `&yen ${val.toFixed(2)}`;
+  initData(){
+    this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => {
+      if (res) {
+        this.chartData = res
+        this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }
+    })
   }
   render(el: ElementRef<HTMLDivElement>): void {
-    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+    this.el = el.nativeElement
   }
   private init(el: HTMLElement): void {
-    const data = [
-      { item: '货源单', count: 40, percent: 0.4 },
-      { item: '合同单', count: 21, percent: 0.21 },
-      { item: '事例三', count: 17, percent: 0.17 },
-      { item: '事例四', count: 13, percent: 0.13 },
-      { item: '事例五', count: 9, percent: 0.09 },
-    ];
     const chart = new Chart({
       container: el,
       autoFit: true,
@@ -121,14 +44,14 @@ export class OperationtablePieComponent implements OnInit {
       innerRadius: 0.7,
     });
 
-    chart.data(data);
+    chart.data(this.chartData);
 
-    chart.scale('percent', {
-      formatter: val => {
-        val = val * 100 + '%';
-        return val;
-      },
-    });
+    // chart.scale('percent', {
+    //   formatter: val => {
+    //     val = val * 100 + '%';
+    //     return val;
+    //   },
+    // });
 
     chart.tooltip(false);
 
@@ -136,10 +59,11 @@ export class OperationtablePieComponent implements OnInit {
     chart.legend('item', {
       position: 'right',                                  // 配置图例显示位置
       custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
-      items: data.map((obj, index) => {
+      items: this.chartData.map((obj: any, index: any) => {
         return {
           name: obj.item,                                 // 对应 itemName
-          value: obj.percent,                             // 对应 itemValue
+          value: obj.percent+ '%  ' + obj.count,
+          count: obj.count,                             // 对应 itemValue
           marker: {
             symbol: 'square',                             // marker 的形状
             style: {
@@ -153,7 +77,7 @@ export class OperationtablePieComponent implements OnInit {
         style: {
           fill: '#999',
         },                                               // 配置 itemValue 样式
-        formatter: (val: any) => `${val * 100}%`                // 格式化 itemValue 内容
+        formatter: (val: any) => `${val}`                // 格式化 itemValue 内容
       },
     });
 
@@ -184,9 +108,12 @@ export class OperationtablePieComponent implements OnInit {
     chart.removeInteraction('legend-filter');
     chart.interaction('element-active');
 
-    chart.render();
+    chart.render(true);
     // 默认选择
     interval.elements[0].setState('selected', true);
+    const ele = interval.elements[0].getData();
+   
+    
     // 监听 element 上状态的变化来动态更新 Annotation 信息
     chart.on('element:statechange', (ev: any) => {
       const { state, stateStatus, element } = ev.gEvent.originalEvent;