添加百度地图 ，echart示例

package.json

@@ -42,8 +42,10 @@
     "angular2-qrcode": "^2.0.3",
     "crypto-js": "^4.1.1",
     "driver.js": "^0.9.8",
+    "echarts": "^5.3.2",
     "ng-zorro-antd": "^13.2.1",
     "ngx-color-picker": "^12.0.1",
+    "ngx-echarts": "^8.0.1",
     "ngx-quicklink": "^0.2.7",
     "rxjs": "~7.4.0",
     "screenfull": "^6.0.0",

src/app/config/menu.ts

@@ -488,21 +488,39 @@ const menuNav: Menu[] = [
         ]
       },
       {
-        title: '地图',
+        title: '图表',
         icon: 'dashboard',
         open: false,
         showIcon: true,
         actionCode: ActionCode.UserManage,
         selected: false,
-        path: '/default/feat/map',
+        path: '/default/feat/charts',
         children: [
           {
             title: '高德',
             open: false,
             selected: false,
             icon: 'highlight',
             showIcon: false,
-            path: '/default/feat/map/gaode',
+            path: '/default/feat/charts/gaode-map',
+            actionCode: ActionCode.UserManage,
+          },
+          {
+            title: '百度',
+            open: false,
+            selected: false,
+            icon: 'highlight',
+            showIcon: false,
+            path: '/default/feat/charts/baidu-map',
+            actionCode: ActionCode.UserManage,
+          },
+          {
+            title: 'Echarts',
+            open: false,
+            selected: false,
+            icon: 'highlight',
+            showIcon: false,
+            path: '/default/feat/charts/echarts',
             actionCode: ActionCode.UserManage,
           },
         ]

src/app/core/services/common/message.service.ts

@@ -6,7 +6,7 @@ import {ModalOptions} from 'ng-zorro-antd/modal/modal-types';
 import {filter} from 'rxjs/operators';
 import {NzSafeAny} from "ng-zorro-antd/core/types";
 
-export enum MessageType {
+export const enum MessageType {
   Info = 'info',
   Error = 'error',
   Warning = 'warning',
@@ -15,7 +15,7 @@ export enum MessageType {
   Loading = 'loading'
 }
 
-export enum MessageCallback {
+export const enum MessageCallback {
   Cancel = 'onCancel',
   Ok = 'onOk'
 }

src/app/core/services/common/theme-skin.service.ts

@@ -4,7 +4,7 @@ import {first} from "rxjs/operators";
 import {DOCUMENT} from "@angular/common";
 import {NzSafeAny} from "ng-zorro-antd/core/types";
 
-enum ThemeType {
+const enum ThemeType {
   dark = 'dark',
   default = 'default',
 }

src/app/pages/feat/charts/baidu-map/baidu-map-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {BaiduMapComponent} from "@app/pages/feat/charts/baidu-map/baidu-map.component";
+
+const routes: Routes = [
+  {path: '', component: BaiduMapComponent, data: {title: '百度', key: 'baidu-map'}}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BaiduMapRoutingModule { }

src/app/pages/feat/charts/baidu-map/baidu-map.component.html

@@ -0,0 +1,6 @@
+<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>
+<div class="normal-table-wrap">
+  <nz-card>
+    <div id="map" style="height: 500px;width: 100%;"></div>
+  </nz-card>
+</div>

src/app/pages/feat/charts/baidu-map/baidu-map.component.ts

@@ -0,0 +1,29 @@
+import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit} from '@angular/core';
+import {PageHeaderType} from "@shared/components/page-header/page-header.component";
+import {LazyService} from "@core/services/common/lazy.service";
+
+declare var BMap: any;
+@Component({
+  selector: 'app-baidu-map',
+  templateUrl: './baidu-map.component.html',
+  styleUrls: ['./baidu-map.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BaiduMapComponent implements OnInit {
+  pageHeaderInfo: Partial<PageHeaderType> = {
+    title: '百度地图，可不要暴露行踪了哟',
+    breadcrumb: ['首页', '功能', '图表', '百度地图'],
+  };
+
+  constructor(private lazyService: LazyService) {
+  }
+
+  ngOnInit() {
+    this.lazyService.loadScript('http://api.map.baidu.com/getscript?v=2.0&ak=RD5HkkjTa6uAIDpw7GRFtR83Fk7Wdk0j').then(()=>{
+      const map = new BMap.Map('map');                   //创建地图实例
+      const point = new BMap.Point(116.404, 39.915);     //创建点坐标
+      map.centerAndZoom(point, 15);                      //初始化地图，设置中心点坐标和地图级别
+      map.enableScrollWheelZoom(true);                   //开启鼠标滚轮缩放
+    });
+  }
+}

src/app/pages/feat/charts/baidu-map/baidu-map.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { BaiduMapRoutingModule } from './baidu-map-routing.module';
+import {SharedModule} from "@shared/shared.module";
+import {BaiduMapComponent} from "@app/pages/feat/charts/baidu-map/baidu-map.component";
+
+// O7EUG8p2Mp0Ne6bm8HygWspxwjEdPvdY
+
+@NgModule({
+  declarations: [BaiduMapComponent],
+  imports: [
+    SharedModule,
+    BaiduMapRoutingModule
+  ]
+})
+export class BaiduMapPageModule { }

src/app/pages/feat/charts/charts-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path: 'gaode-map', loadChildren: () => import('./gaode-map/gaode-map.module').then(m => m.GaodeMapModule)},
+  {path: 'baidu-map', loadChildren: () => import('./baidu-map/baidu-map.module').then(m => m.BaiduMapPageModule)},
+  {path: 'echarts', loadChildren: () => import('./echarts/echarts.module').then(m => m.EchartsModule)},
+  {path: '', redirectTo: 'gaode-map', pathMatch: 'full'},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ChartsRoutingModule { }

src/app/pages/feat/charts/charts.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ChartsRoutingModule } from './charts-routing.module';
+
+@NgModule({
+  declarations: [
+  ],
+  imports: [
+    ChartsRoutingModule,
+  ]
+})
+export class ChartsModule { }

src/app/pages/feat/charts/echarts/advanced/advanced.component.html

@@ -0,0 +1,7 @@
+<nz-card nzTitle="高级">
+  <nz-tabset [nzTabPosition]="'left'">
+    <nz-tab (nzClick)="to(index)" *ngFor="let item of tabArray;let index=index" [nzTitle]="item.label">
+      <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
+    </nz-tab>
+  </nz-tabset>
+</nz-card>

src/app/pages/feat/charts/echarts/advanced/advanced.component.ts

@@ -0,0 +1,38 @@
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {ConnectChartsComponent} from "@app/pages/feat/charts/echarts/advanced/connect-charts/connect-charts.component";
+import {
+  DraggableChartsComponent
+} from "@app/pages/feat/charts/echarts/advanced/draggable-charts/draggable-charts.component";
+import {ComponentPortal, Portal} from "@angular/cdk/portal";
+import {ComponentType} from "@angular/cdk/portal/portal";
+
+type targetComp =
+  ConnectChartsComponent
+  | DraggableChartsComponent;
+
+@Component({
+  selector: 'app-advanced',
+  templateUrl: './advanced.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdvancedComponent implements OnInit {
+  componentPortal?: ComponentPortal<targetComp>;
+  selectedPortal!: Portal<any>;
+  tabArray: { label: string, value: ComponentType<targetComp> }[] = [
+    {label: 'Connect Charts', value: ConnectChartsComponent},
+    {label: 'Draggable Chart', value: DraggableChartsComponent},
+  ];
+
+  constructor() {
+  }
+
+  to(tabIndex: number): void {
+    this.componentPortal = new ComponentPortal(this.tabArray[tabIndex].value);
+    this.selectedPortal = this.componentPortal;
+  }
+
+  ngOnInit(): void {
+    this.to(0);
+  }
+
+}

src/app/pages/feat/charts/echarts/advanced/connect-charts/connect-charts.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { getInstanceByDom, connect } from 'echarts';
+import {EChartsOption} from "echarts/types/dist/echarts";
+
+@Component({
+  selector: 'app-connect-charts',
+  template: `
+    <div nz-row>
+      <div nz-col nzSpan="12">
+        <h5> id=chart1 </h5>
+        <div id="chart1" echarts [options]="options" theme="macarons" class="demo-chart"></div>
+      </div>
+      <div nz-col nzSpan="12">
+        <h5> id=chart2 </h5>
+        <div id="chart2" echarts [options]="options" theme="macarons" class="demo-chart"></div>
+      </div>
+    </div>
+  `,
+  styles: [
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ConnectChartsComponent {
+
+  options:EChartsOption = {
+    color: ['#3398DB'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisTick: {
+          alignWithLabel: true,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: 'Counters',
+        type: 'bar',
+        barWidth: '60%',
+        data: [10, 52, 200, 334, 390, 330, 220],
+      },
+    ],
+  };
+  constructor() {}
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      const chartElement1 = document.getElementById('chart1');
+      const chartElement2 = document.getElementById('chart2');
+      const chart1 = getInstanceByDom(chartElement1!);
+      const chart2 = getInstanceByDom(chartElement2!);
+      connect([chart1!, chart2!]);
+    });
+  }
+}