Angular ngOnInit中调用ApexCharts appendSeries报undefined读取错误

• @ViewChild查询到的ApexCharts组件实例，在ngOnInit触发时还没有完成初始化赋值。这个阶段你能拿到的只有提前在构造函数里定义好的chartOptions配置对象，真正渲染图表的实例此时还不存在，直接调用实例的appendSeries方法自然会抛出undefined错误。
• 构造函数只负责类的成员变量初始化，和DOM、子组件实例的渲染流程完全独立，不会触发图表实例的创建。

• 调整方法调用的生命周期时机：将原本写在ngOnInit里的新增系列逻辑，移动到ngAfterViewInit钩子中执行。这个钩子触发时，所有通过@ViewChild关联的子组件实例都已经完成创建，此时获取到的chart实例可正常调用内置方法。
  替换后的核心代码：

  // 移除ngOnInit中所有操作chart实例的逻辑
  ngAfterViewInit() {
    // 此处调用时chart实例已完成初始化
    this.chart.appendSeries([
      {
        name: "George Washington",
        data: [
          {
            x: "President",
            y: [
              new Date(1789, 3, 30).getTime(),
              new Date(1797, 2, 4).getTime()
            ]
          }
        ]
      }
    ]);
  }
  

• 简化静态场景的实现：如果新增的系列数据是组件加载时就已经确定的固定值，不需要手动调用appendSeries方法，直接把对应数据对象拼接到chartOptions初始的series数组中即可，图表渲染时会自动加载全部系列，从根源上规避实例时序问题。
• 增加防御性判断：如果后续系列数据来自异步请求（比如接口返回后才需要新增），在调用appendSeries前加上this.chart &&的判空逻辑，避免极端时序下再次出现空引用报错。

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