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