react 中echarts-for-react使用resize解决图表自适应问题

import React, { PureComponent } from "react";
import ReactEcharts from 'echarts-for-react';

class LineChart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
    
  componentDidMount() {
    let myChart = this.echarts&&this.echarts.getEchartsInstance(); 
    //拿到实例后 通过getEchartsInstance()，在EchartsReactCore里ECharts实例
    //注意EchartsReactCore实例和ECharts实例的区别 下面附上图片
    //监听窗口onresize变化  这里有两种写法 推荐使用addEventListener写法 第一种方法绑定多个resize事件 
    //会被覆盖
    //这里只是简写 这里可以把函数提出来
     //window.onresize = ()=> {
     // myChart&&myChart.resize();
    // };
    window.addEventListener('resize',()=>{
      myChart&&myChart.resize();
    })
  }

  render() {
    const { option } = this.state; //option省略 看具体需求 
    return (
      <div className="data-collection" style={{width:'100%',height:'100%'}}>
         通过ref 拿到EchartsReactCore 实例
        <ReactEcharts  ref={(e) => { this.echarts = e;}} option={option} style={{width:'100%',height:'100%'}}/>
      </div>
    );
  }
}
export default LineChart;

EchartsReactCore实例.png

ECharts实例.png