edit

src/app/global-config.module.ts

@@ -20,7 +20,14 @@ const alainConfig: AlainConfig = {
   sf: { button: { search: '查询' }, ui: { placeholder: '请输入' } },
   pageHeader: { homeI18n: 'home', recursiveBreadcrumb: true },
   auth: { login_url: '/passport/login' },
-  acl: { guard_url: '/exception/403' }
+  acl: { guard_url: '/exception/403' },
+  chart: {
+    // 以下是默认配置，如果项目无法外网访问，可以根据 `angular.json` 配置将依赖包直接使用 `./assets***` 路径
+    libs: [
+      'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js',
+      'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js'
+    ]
+  }
 };
 
 const alainModules = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];

src/app/routes/regulatory-data/components/dashboard/dashboard.component.html

@@ -0,0 +1,13 @@
+<button nz-button (click)="refresh()" nzType="primary">Refresh</button>
+<g2-pie
+  #pie
+  [hasLegend]="true"
+  title="销售额"
+  subTitle="销售额"
+  [total]="total"
+  [valueFormat]="format"
+  [data]="salesPieData"
+  height="294"
+  repaint="false"
+  (clickItem)="handleClick($event)"
+></g2-pie>

src/app/routes/regulatory-data/components/dashboard/dashboard.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.less']
+})
+export class DashboardComponent implements OnInit {
+  @ViewChild('pie', { static: false }) readonly pie!: G2PieComponent;
+  salesPieData: G2PieData[] = [];
+  total = '';
+
+  constructor(private msg: NzMessageService) {
+    this.refresh();
+  }
+  ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  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()
+      }
+    ];
+    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(() => this.pie.changeData());
+    }
+  }
+
+  format(val: number): string {
+    return `&yen ${val.toFixed(2)}`;
+  }
+
+  handleClick(data: G2PieClickItem): void {
+    this.msg.info(`${data.item.x} - ${data.item.y}`);
+  }
+}

src/app/routes/regulatory-data/regulatory-data-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+
+const routes: Routes = [{ path: 'dashboard', component: DashboardComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class RegulatoryDataRoutingModule {}

src/app/routes/regulatory-data/regulatory-data.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule, SHARED_G2_MODULES } from '@shared';
+
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { RegulatoryDataRoutingModule } from './regulatory-data-routing.module';
+
+const COMPONENTS: any = [DashboardComponent];
+const NOTROUTECOMPONENTS: any = [];
+@NgModule({
+  declarations: [...COMPONENTS, ...NOTROUTECOMPONENTS],
+  imports: [CommonModule, RegulatoryDataRoutingModule, SharedModule, SHARED_G2_MODULES]
+})
+export class RegulatoryDataModule {}

src/app/routes/regulatory-data/services/regulatory-data.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RegulatoryDataService {
+
+  constructor() { }
+}

src/app/routes/routes-routing.module.ts

@@ -15,6 +15,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { LayoutProComponent } from '@brand';
 import { EATokenGuard } from '@core';
 import { environment } from '@env/environment';
+
 import { AuthGuard } from '../core/guards/auth.guard';
 
 // dashboard pages
@@ -68,6 +69,7 @@ const routes: Routes = [
       },
       { path: 'menu-management', loadChildren: () => import('./menu-manager/menu-manager.module').then(m => m.MenuManagerModule) },
       { path: 'partner', loadChildren: () => import('./partner/partner.module').then(m => m.PartnerModule) },
+      { path: 'regulatory-data', loadChildren: () => import('./regulatory-data/regulatory-data.module').then(m => m.RegulatoryDataModule) },
       {
         path: 'download',
         loadChildren: () => import('./download/download.module').then(m => m.DownloadModule)
@@ -92,4 +94,4 @@ const routes: Routes = [
   ],
   exports: [RouterModule]
 })
-export class RouteRoutingModule { }
+export class RouteRoutingModule {}

src/app/shared/index.ts

@@ -33,4 +33,5 @@ export * from './shared.module';
 export * from './shared-delon.module';
 export * from './shared-zorro.module';
 export * from './shared-third.module';
+export * from './shared-g2.module';
 export * from './widget/st-widget.module';

src/app/shared/shared-g2.module.ts

@@ -0,0 +1,6 @@
+import { G2BarModule } from '@delon/chart/bar';
+import { G2MiniAreaModule } from '@delon/chart/mini-area';
+import { G2PieModule } from '@delon/chart/pie';
+import { G2TimelineModule } from '@delon/chart/timeline';
+
+export const SHARED_G2_MODULES = [G2BarModule, G2PieModule, G2TimelineModule, G2MiniAreaModule];

src/assets/mocks/menu-data.json

@@ -630,6 +630,16 @@
               
             }
           ]
+        },
+        {
+          "text": "数据监管",
+          "icon": "iconfont icon-hetong-copy",
+          "group": true,
+          "children": [{
+              "text": "数据报表",
+              "link": "/regulatory-data/dashboard"
+            }
+          ]
         }
       ]
     }]