<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>