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
