Angular 17中ApexCharts窗口resize后图表消失问题求助

针对你遇到的resize后图表消失的问题，试试下面几个针对性的方案：

1. 直接调用图表实例的resize方法（最可靠） #

不要重新加载配置，而是获取ApexCharts的实例，在resize时直接调用它的resize()方法，这是最直接有效的方式。

首先在组件里通过ViewChild获取图表实例：

import { Component, ViewChild, AfterViewInit, HostListener } from '@angular/core';
import { ChartComponent } from 'ng-apexcharts';
import { ApexOptions } from 'apexcharts';

@Component({
  selector: 'app-line-chart',
  template: `<apx-chart [options]="chartOptions"></apx-chart>`
})
export class LineChartComponent implements AfterViewInit {
  @ViewChild(ChartComponent) chart!: ChartComponent;
  chartOptions: ApexOptions = {};

  ngAfterViewInit(): void {
    // 确保DOM渲染完成后再初始化图表配置
    this.chartOptions = {
      chart: {
        type: 'line',
        // 关闭自动重绘，改用手动控制避免冲突
        redrawOnWindowResize: false,
        redrawOnParentResize: false
      },
      series: [{
        name: '测试数据',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }],
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
      }
    };
  }

  @HostListener('window:resize')
  onWindowResize() {
    // 实例存在时直接调用resize方法
    if (this.chart?.chartRef) {
      this.chart.chartRef.resize();
    }
  }
}

2. 确保图表容器有稳定的尺寸 #

很多时候resize后图表消失是因为容器高度塌陷，给图表容器设置明确的高度或最小高度：

apx-chart {
  display: block;
  min-height: 400px; /* 也可以用固定高度 height: 400px; */
  width: 100%;
}

3. 用NgZone包裹resize事件处理（适配Angular 17信号机制） #

Angular 17的信号驱动变更检测可能会忽略外部触发的resize事件，把resize处理逻辑放到NgZone里确保变更检测生效：

import { NgZone } from '@angular/core';

// 组件构造函数注入NgZone
constructor(private ngZone: NgZone) {}

@HostListener('window:resize')
onWindowResize() {
  this.ngZone.run(() => {
    if (this.chart?.chartRef) {
      this.chart.chartRef.resize();
    }
  });
}

4. 避免在ngOnInit中初始化配置 #

ngOnInit阶段DOM可能还未完全渲染，图表容器没有尺寸，导致初始化的图表在resize时无法正确重绘，改用ngAfterViewInit初始化配置（如第一个方案中的代码）。

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