怎么样在NG-ZORRO组件库的组件里展示出来

[liangqiliang]

我使用了组件库NG-ZORRO，但是在nz-card组件下展示不出来echarts图表，有什么解决方案吗？

[xieziyu]

正常使用即可：

<nz-card style="width:300px;">
  <ng-template #title>
    test ngx-echarts
  </ng-template>
  <ng-template #body>
    <div echarts [options]="options"></div>
  </ng-template>
</nz-card>

[liangqiliang]

@xieziyu 感谢作者答复，已经解决我的问题；但是我在nz-tab下没有显示出图表： `<nz-card [nzLoading]="loading" [nzBordered]="false" nzNoPadding class="sales-card"> <ng-template #body>

页面访问量

</ng-template>

`

[xieziyu]

这些组件都存在一个投影映射的过程，使得echarts在初始化的时候，没有获取到父容器的宽高，所以无法正确显示图像。 要解决这个并没有太多好的办法，可以尝试一下延迟赋值chartOption的方式：

export class AppComponent implements AfterViewInit {
  chartOption = {};

  ngAfterViewInit() {
    this.chartOption = {
      // setup chart options in AfterViewInit life circle hook:
      // ...
    };
  }
}

[liangqiliang]

好的，该方法测试可用，多谢作者！

[yrang]

多谢作者，我也是同样的问题。module可以，组件不可以。已解决。