关于javascript:Echarts切换的时候没有loading动画了

46次阅读

共计 897 个字符，预计需要花费 3 分钟才能阅读完成。

<div className='LineEcharts'>

    !LineData ?
    
    <div className='loader_wrap'>
    
        <Spin />
        
    </div> :
    
    JSON.stringify(LineData) === '{}' ?
    
    <div className="echart_nodata LineEcharts_nodata">
    
        <i className="iconfont iconzanwushuju echart_nodata_icon"></i>
        
        <p>{formatMessage({id: 'common_noData'}) }</p>
        
    </div>
    
    :
    
    <div id='EchartsMain' ref={(EchartsRef)}></div>
    
</div>

这是我写的代码，很简略，如果数据为 null，就显示 loading 动画, 如果没有数据就显示暂无数据，逻辑很简略，就是在切换 Tab 的时候暂无数据和 Echarts 同时呈现了，很纳闷，为啥啊，打印了数据也没问题，起初看了看 Echarts, 发现 Echarts 的 Dom 没有革除掉,Echarts 会附着在 LineEcharts 这个父元素上，导致 Echarts 没有革除掉，只有在 id=’EchartsMain’ 的 dom 里面在套一层 div 就完满的解决问题了。在此记录一下，喜爱的记着点个赞哦。
正确代码↓

<div className='LineEcharts'>

    {
    
        !LineData ?
        
        <div className='loader_wrap'>
        
            <Spin />
            
        </div> :
        
        JSON.stringify(LineData) === '{}' ?
        
        <div className="echart_nodata LineEcharts_nodata">
        
            <i className="iconfont iconzanwushuju echart_nodata_icon"></i>
            
            <p>{formatMessage({id: 'common_noData'}) }</p>
            
        </div>
        
        :
        
        <div>
        
            <div id='EchartsMain' ref={(EchartsRef)}></div>       
            
        </div>
        
    }
</div>

正文完