放入mat-grid-tile的ngx-echarts图表无法显示求助

核心原因 #

mat-grid-tile的布局尺寸是动态计算的，当ngx-echarts初始化图表时，容器可能还未获得正确的宽高，导致echarts无法渲染出可见的图表。此外，容器缺少明确的尺寸定义也会导致图表无法正常显示。

步骤1：给图表容器设置明确尺寸 #

在app.component.css中添加样式，确保图表容器占满mat-grid-tile的空间：

.my-chart {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 兜底最小高度，避免布局波动时尺寸为0 */
}

步骤2：启用自动调整或手动触发resize #

方式一：启用ngx-echarts的自动resize #

直接在模板的echarts指令上添加[autoResize]="true"，让图表自动监听容器尺寸变化：

<mat-grid-tile role="none">
  <div echarts [options]="myChartOptions" class="my-chart" [autoResize]="true"></div>
</mat-grid-tile>

方式二：手动触发resize（适合复杂布局场景） #

如果自动resize不生效，可以在组件视图初始化完成后手动触发图表resize，确保mat-grid布局已稳定：
修改app.component.ts：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import type { EChartsOption } from 'echarts';
import { EChartsComponent } from 'ngx-echarts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-app';
  @ViewChild(EChartsComponent) echartsComponent?: EChartsComponent;

  myChartOptions: EChartsOption = {
    title: {
        left: '50%',
        text: 'My Team',
        subtext: 'Team Members',
        textAlign: 'center',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    calculable: true,
    series: [
        {
            name: 'area',
            type: 'pie',
            radius: [30, 110],
            roseType: 'area',
            data: [
                { value: 3, name: 'Manager' },
                { value: 5, name: 'Associate Manager' },
                { value: 10, name: 'Team Leader' },
                { value: 25, name: 'Developer' },
                { value: 20, name: 'Designer' },
                { value: 10, name: 'Tester' }
            ]
        }
    ]
  };

  ngAfterViewInit(): void {
    // 延迟100ms确保mat-grid布局计算完成
    setTimeout(() => {
      this.echartsComponent?.echartsInstance?.resize();
    }, 100);
  }
}

额外检查点 #

• 确认ngx-echarts已正确安装（执行npm install ngx-echarts echarts）
• 检查浏览器控制台是否有报错，比如echarts模块未正确加载的问题

内容的提问来源于stack exchange，提问作者Dnyaneshwar