如何让echarts与react-grid-layout一起调整大小？

import React, { Component } from 'react';
import ReactGridLayout from 'react-grid-layout';
import echarts from 'echarts';

constructor(props) {
  super(props);
  this.state = {
    chartInstance: null
  };
}

componentDidMount() {
  const chartInstance = echarts.init(document.getElementById('chart'));
  this.setState({ chartInstance });
}

render() {
  const layout = [
    { i: 'chart', x: 0, y: 0, w: 6, h: 4 }
  ];

  return (
    <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
      <div key="chart" id="chart" />
    </ReactGridLayout>
  );
}

componentDidUpdate() {
  const { chartInstance } = this.state;
  if (chartInstance) {
    chartInstance.resize();
  }
}