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