react-grid-layout布局变化时调用Echarts.resize报错resize is not a function如何解决

云上老周

2026-10-4

问题原因

你触发报错的核心原因是调用resize方法的对象错误：

ReactGridLayout的onLayoutChange回调返回的第一个参数是所有grid项的布局配置数组，并非Echarts实例，直接对该数组调用resize()自然会抛出resize is not a function错误。
你没有在父组件统一存储所有Echarts实例，布局变化时无法找到需要调整尺寸的图表对象。

修复步骤

1. 父组件统一存储Echarts实例

在index.js的state中新增字段存储所有图表实例，使用每个图表的唯一key作为键名：

// index.js state初始化
state = {
  // 原有其他state字段
  chartInstances: {}
}

修改子组件回传实例的逻辑，回传时携带当前图表的唯一key，父组件接收后存入state：

// 子组件NewvsReturnVisitors中调用传值方法时增加key参数
props.value(el.key, chartInstance);

// index.js新增接收实例的方法
saveChartInstance = (chartKey, instance) => {
  this.setState(prevState => ({
    chartInstances: {
      ...prevState.chartInstances,
      [chartKey]: instance
    }
  }))
}

2. 重写onLayoutChange回调

布局变化时遍历存储的所有Echarts实例，逐个调用resize方法：

onLayoutChange() {
  Object.values(this.state.chartInstances).forEach(instance => {
    // 增加校验避免实例未初始化完成时报错
    if (instance && typeof instance.resize === 'function') {
      instance.resize()
    }
  })
}