react中echarts根据父级div大小自动适应大小

在React中使用ECharts，可以通过设置一个ref来获取父级div的大小，然后在组件挂载和父级div大小改变时动态设置ECharts的大小。

例如，你可以在ECharts组件的父级div上设置一个ref，如下所示：

<div ref={(div) => { this.chartContainer = div; }}></div>

然后在组件挂载时，获取父级div的大小并设置ECharts的大小：

componentDidMount() {
  const chart = echarts.init(this.chartContainer);
  chart.setOption(this.props.option);
  this.resizeChart();
  window.addEventListener('resize', this.resizeChart);
}

resizeChart = () => {
  const chart = echarts.getInstanceByDom(this.chartContainer);
  const width = this.chartContainer.clientWidth;
  const height = this.chartContainer.clientHeight;
  chart.resize({width, height});
}

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeChart);
}

在父级div大小改变时，也会调用resizeChart函数来动态设置ECharts的大小。