[web-app] dashboard模拟数据展示

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+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',
@@ -6,4 +8,55 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./dashboard.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardComponent {}
+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}`);
+  }
+
+}