Angular中调用eCharts的resize方法失效报错如何解决？

你错误地将ECharts配置项对象当做图表实例调用了resize方法。ECharts的resize()是echarts.init()返回的实例对象专属方法，你当前定义的this.chartOptions仅存储图表的配置参数，不存在resize方法，因此触发报错。

• 单独声明变量存储ECharts实例，初始化图表时将init返回的实例赋值给该变量
• 调用setOption方法将你的配置项挂载到实例上
• 窗口resize事件中调用实例的resize方法，可补充非空判断避免实例未初始化时报错

正确的图表初始化代码示例：

// 声明变量存储ECharts实例
private chartInstance: any;

// 图表初始化逻辑
initChart() {
  const chartDom = document.getElementById('你的图表容器ID');
  this.chartInstance = echarts.init(chartDom);
  // 你的原有配置项
  this.chartOptions = {
    type:'radar',
    indicators: [],
    series: []
    // 其余配置省略
  };
  this.chartInstance.setOption(this.chartOptions);
}

resize事件的正确写法：

@HostListener('window:resize', ['$event'])
onResize(event) {
  // 非空判断避免实例未初始化时调用报错
  this.chartInstance?.resize();
}

可以给resize逻辑增加防抖，避免窗口频繁调整时多次触发重绘造成性能损耗：

private resizeTimer: NodeJS.Timeout | null = null;

@HostListener('window:resize', ['$event'])
onResize(event) {
  if (this.resizeTimer) clearTimeout(this.resizeTimer);
  this.resizeTimer = setTimeout(() => {
    this.chartInstance?.resize();
  }, 300);
}

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