React加载样式导致echarts宽度计算错误?

Question

1. 有如下react组件：

import "./Home.scss";

class Home extends React.Component{
    render(){
        return (
            <div className="box clearfix">
                <div className="left">
                    <Echart style={{width: '100%', height: 300}} .../>
                </div>
                <div className="right">
                    <Echart style={{width: '100%', height: 300}} .../>
                </div>
            </div>
        );
    }
}

.left、.right各占50%，但是渲染时Echarts的宽度确是100%，如果我把样式写在行内，就不会有问题

//Home.scss
.box{
    .left, .right{
        width: '50%';
        float: left;
    }
}

所以感觉应该是渲染Echarts时样式并未加载进来，所以刚开始left和right宽度都是100%，这个改怎么解决？

Answer 1

我的解决办法使用setTimeout(()=>{代码})；

部分代码如下

setTimeout(() => {
      let ele = document.getElementById(`chart-line-container${type}`);
      let myChart = echarts.init(ele);
      myChart.showLoading({
        text: '正在努力的读取数据中...',    //loading
      });
      。。。
}, 0);