初始化的问题

[zzz]

我想请问下，在使用angular6和ngx-echarts3.0.1的前提下，我的echarts图初始化加载不出来，调整浏览器宽度才会出来，我想问下有没有手动加载的api

[xieziyu]

@lzk1994 可以在chartInit之后手动调用一次resize

<div echarts class="chart" [options]="options" (chartInit)="onChartInit($event)"><div>

Component:

onChartInit(chart: any) {
  chart.resize();
}

但我不太清楚你的环境下，为什么需要调整宽度才能显示，难道图表初始化的时候，DOM没有生成以至于没能获取到宽高？

[xieziyu]

@lzk1994 OK，又是ng-zorro的组件，nz-card的相关的问题，它使得子组件初始时候的DOM width=0， 看来有必要对它做些兼容性处理了……

你可以尝试这样解决，并且不用chartInit 和 resize（因为这个时间点，width还是0）: 将this.option的赋值从ngOnInit移步到ngAfterViewInit里的下一个周期：

ngAfterViewInit() {
  setTimeout(() => {
    this.option = { /** ... */ };
  });
}

[xieziyu]

@lzk1994 请使用 ngx-echarts 3.1.0 版本，针对这种场景做了升级，并且 option 的赋值可以在ngOnInit中进行了

[NickyXu1989]

我也是在nz-card中遇到了这个问题，使用了3.1.0版本，还是会有这个问题，我的解决方法如下： 使用[style.width]=chartWidth ，chartWidth默认值为1，然后在ngAfterViewInit这个生命周期中将这个值清空，这个问题就解决了

[zzz]

@xieziyu @NickyXu1989 多谢啦

[Charlie50503]

我在 angular 18 並使用 ngx-echarts 18.0.0 搭配 echarts : ^5.5.1 也遇到一樣的問題

我的 package.json 配置

{
  "name": "template-project",
  "version": "0.0.0",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.1",
    "@angular/cdk": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/forms": "^18.1.1",
    "@angular/material": "^18.1.1",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/router": "^18.1.1",
    "@auth0/angular-jwt": "^5.2.0",
    "echarts": "^5.5.1",
    "ngx-echarts": "^18.0.0",
    "ngx-spinner": "^17.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.1",
    "@angular/cli": "^18.1.1",
    "@angular/compiler-cli": "^18.1.1",
    "@types/jasmine": "~5.1.0",
    "autoprefixer": "^10.4.19",
    "cross-env": "^7.0.3",
    "del-cli": "^5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ng-openapi-gen": "^0.51.0",
    "postcss": "^8.4.39",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.6",
    "typescript": "~5.4.2"
  }
}

html

<div
  echarts
  [options]="{}"
  class="w-[100px] h-[100px]"
  (chartInit)="onChartInit($event)"
></div>

component.ts

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  input,
} from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { ECharts, EChartsOption } from 'echarts';
import { generateChartOption, lineOption } from './lineChartOptions';
import { NgxEchartsDirective } from 'ngx-echarts';
import { toObservable } from '@angular/core/rxjs-interop';
import { SourceHost } from './data';

@Component({
  selector: 'app-summary-card',
  standalone: true,
  imports: [MatDividerModule, NgxEchartsDirective],
  templateUrl: './summary-card.component.html',
  styleUrl: './summary-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SummaryCardComponent {
  public dataSource = input.required<SourceHost>();
  private dataSource$ = toObservable(this.dataSource);
  /** chart instance  */
  private chartInstance!: ECharts;
  constructor(private cdr: ChangeDetectorRef) {}

  /** 初始化 圖表 */
  protected onChartInit(e: ECharts) {
    this.chartInstance = e;

    this.dataSource$.subscribe((data) => {
    // 如果不加上 setTimeout 視圖就沒辦法刷新
      setTimeout(() => { 
        this.updateChart(data);
      },0)
    });
  }

  /** 更新圖表顯示 */
  private updateChart() {
    this.chartInstance.setOption(
      {
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7'],
          show: true,
        },
        yAxis: {
          type: 'value',
          show: true,
        },
        series: [
          {
            areaStyle: {
              color: 'rgb(208, 231, 246)', 
            },
            data: [1, 2, 3, 4, 5, 6, 7],
            type: 'line',
            smooth: false,
            symbolSize: 1, 
          },
        ],
        tooltip: {
          show: true,
        },
      },
      true,
    );
  }
}

我有嘗試過的以下方法都沒有用

1. 取消使用 changeDetection
2. ngx-echarts 降到 17.1.0 , echarts 降到 5.5.0

我有另一個專案使用 angular 17搭配 ngx-echarts: 17.1.0, echarts :5.5.0 不使用 setTimeOut 是畫得出來的

可能是 angular 18 適配性問題 可能要請開發團隊調整看看