echarts图随着浏览器窗口自适应

echarts图随着浏览器窗口自适应

方法一：先在componentDidMount组件初始化echarts图，然后浏览器监听echarts图的大小，非常值的注意的是：在关闭页面的时候需要在componentWillUnmount组件必须移除这个监听事件，否则浏览器会一直监听。

componentDidMount(){
    this.myChart = echarts.init(this.refs.myChart);
    window.addEventListener("resize", this.handleWindowResize);
}

handleWindowResize = () => {
    this.myChart.resize();
};


componentWillUnmount() {
    window.removeEventListener("resize", this.handleWindowResize);
}

方法二：监听浏览器的大小，一旦浏览器发生变化，就通过document.body.clientWidth实时的获取到窗口的大小，然后将这个大小按照一定的运算赋予给我们的容器。

componentDidMount () {
    this.handleClientWidth();
    window.addEventListener('resize', this.handleClientWidth);
};

handleClientWidth = () => {
    this.setState({
        clientWidth: document.body.clientWidth - 160
    });
};
// 把clientWidth这个值赋予给我们的容器

// 退出这个组件的时候将该监听事件给移除
componentWillUnmount() {
    window.removeEventListener("resize", this.handleClientWidth);
}