hertzbeat/web-app/src/app/routes/dashboard/dashboard.component.ts

import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
import {NzMessageService} from "ng-zorro-antd/message";
import {G2PieClickItem, G2PieComponent, G2PieData} from "@delon/chart/pie";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {

  @ViewChild('pie', { static: false }) readonly pie!: G2PieComponent;
  salesPieData: G2PieData[] = [];
  total = '';

  constructor(private msg: NzMessageService){}

  ngOnInit(): void {
    this.refresh();
  }

  refresh(): 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(),
      },
    ];
    this.total = `${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
    if (this.pie) {
      // 等待组件渲染
      setTimeout(() => this.pie.changeData());
    }
  }

  format(val: number): string {
    return `${val.toFixed()}`;
  }

  handleClick(data: G2PieClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }

}