fix ng-zorro css; update echarts

Author: xpioneer

package.json

@@ -38,7 +38,7 @@
  "dagre-compound": "^0.0.13",
  "date-fns": "^4.1.0",
  "dayjs": "^1.11.13",
- "echarts": "^3.8.5",
+ "echarts": "^5.5.1",
  "monaco-editor": "^0.52.0",
  "ng-zorro-antd": "^18.1.1",
  "quill": "^1.3.2",

pnpm-lock.yaml

@@ -2,7 +2,7 @@ import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import './assets/less/index.less';
-import '../node_modules/ng-zorro-antd/ng-zorro-antd.min.css';
+require('../node_modules/ng-zorro-antd/ng-zorro-antd.min.css');
 // import 'quill/dist/quill.bubble.css';
 // import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.snow.css';

src/app.ts

@@ -47,7 +47,7 @@ const icons: IconDefinition[] = [UserOutline, LockOutline, SettingOutline, Appst
  // FormsModule,
  // ReactiveFormsModule,
  // HttpClientModule,
- // RouterModule,
+ RouterModule,
  // AppRouting,
  ZorroAntdModule,
  ],

src/app/app.module.ts

@@ -10,17 +10,17 @@ import { Echarts } from '@utils/echarts';
 import { format } from 'date-fns'
 
 // 引入柱状图
-require('echarts/lib/chart/bar');
-require('echarts/lib/chart/line');
-require('echarts/lib/chart/pie');
+// require('echarts/lib/chart/bar');
+// require('echarts/lib/chart/line');
+// require('echarts/lib/chart/pie');
 // 引入提示框和标题组件
-require('echarts/lib/component/title');
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/toolbox');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/legend/ScrollableLegendModel');
-require('echarts/lib/component/legend/ScrollableLegendAction');
-require('echarts/lib/component/legend/ScrollableLegendView');
+// require('echarts/lib/component/title');
+// require('echarts/lib/component/tooltip');
+// require('echarts/lib/component/toolbox');
+// require('echarts/lib/component/legend');
+// require('echarts/lib/component/legend/ScrollableLegendModel');
+// require('echarts/lib/component/legend/ScrollableLegendAction');
+// require('echarts/lib/component/legend/ScrollableLegendView');
 
 @Component({
  selector: 'app-charts',
@@ -75,7 +75,7 @@ export class ChartComponent {
  // 日期选择
  public changedDate () {
  this.disable = true;
- this.chartService.getSystemLogDate(format(this.date, 'YYYY-MM-DD'))
+ this.chartService.getSystemLogDate(format(this.date, 'yyyy-MM-dd'))
  .pipe(finalize(() => this.disable = false))
  .subscribe((res: any) => {
  this.initSystemLogDateChart(res.data);

src/app/charts/chart.component.ts

@@ -4,16 +4,16 @@ import { Echarts } from '@utils/echarts';
 
 // const echarts = require('echarts/lib/echarts');
 // 引入中国地图
-require('echarts/map/js/china');
-require('echarts/lib/component/visualMap');
+// require('echarts/map/js/china');
+// require('echarts/lib/component/visualMap');
 // 引入提示框和标题组件
-require('echarts/lib/component/title');
-require('echarts/lib/component/tooltip');
-require('echarts/lib/component/toolbox');
-require('echarts/lib/component/legend');
-require('echarts/lib/component/legend/ScrollableLegendModel');
-require('echarts/lib/component/legend/ScrollableLegendAction');
-require('echarts/lib/component/legend/ScrollableLegendView');
+// require('echarts/lib/component/title');
+// require('echarts/lib/component/tooltip');
+// require('echarts/lib/component/toolbox');
+// require('echarts/lib/component/legend');
+// require('echarts/lib/component/legend/ScrollableLegendModel');
+// require('echarts/lib/component/legend/ScrollableLegendAction');
+// require('echarts/lib/component/legend/ScrollableLegendView');
 
 @Component({
  selector: 'dashboard',
@@ -32,6 +32,11 @@ export class Dashboard {
  }
 
  public ngOnInit () {
+ // this.initSystemChinaChart([]);
+ // this.changedSource();
+ }
+
+ ngAfterViewInit() {
  this.initSystemChinaChart([]);
  this.changedSource();
  }

src/app/dashboard/dashboard.component.ts

@@ -1,7 +1,28 @@
 /**
  * echarts
  */
-const Echarts = require('echarts/lib/echarts');
+// const Echarts = require('echarts/lib/echarts');
+import * as Echarts from 'echarts/core'
+import { VisualMapComponentOption, TitleComponentOption } from 'echarts/components'
+import {
+ TitleComponent,
+ TooltipComponent,
+ ToolboxComponent,
+ LegendComponent,
+ LegendScrollComponent,
+ VisualMapComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+Echarts.use([
+ CanvasRenderer,
+ TitleComponent,
+ TooltipComponent,
+ ToolboxComponent,
+ LegendComponent,
+ LegendScrollComponent,
+ VisualMapComponent,
+])
 
 export {
  Echarts,