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();
//拿到實(shí)例后 通過getEchartsInstance()汰现，在EchartsReactCore里ECharts實(shí)例
//注意EchartsReactCore實(shí)例和ECharts實(shí)例的區(qū)別 下面附上圖片
//監(jiān)聽窗口onresize變化 這里有兩種寫法 推薦使用addEventListener寫法 第一種方法綁定多個(gè)resize事件
//會(huì)被覆蓋
//這里只是簡(jiǎn)寫 這里可以把函數(shù)提出來
//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 實(shí)例
<ReactEcharts ref={(e) => { this.echarts = e;}} option={option} style={{width:'100%',height:'100%'}}/>
</div>
);
}
}
export default LineChart;
EchartsReactCore實(shí)例.png
ECharts實(shí)例.png
