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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。