tab切换重新渲染Echarts后不显示

echarts高度或者宽度为0或只有100px,echarts二次渲染不生效

分析原因:

echarts 在默认隐藏的 div 中显示空白,有时候图表会放在多个标签页(tab)里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败(不显示图表、图表的高度为0或者宽度为0),解决办法是在echarts渲染之前先设置 div 的宽高,然后再通过 setOption 方法生成图表。

解决方法:

一:tab切换形式(通过display: none / block),在切换之后先设置 ID元素的宽度和高度再调用 echarts;

例:

$('#main').css('height','100px')

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption(option);

二:追加的 html 中含有 echarts(append),直接在ID元素上添加 style 属性;

例:

$("#id").append('<div id="main" style="width:100px;height:100px"></div>'));

如果不知道是不是因为宽度和高度导致 echarts 的宽高异常,可以在 setOption 之前先打印一下这个 DOM 容器的宽高即可迅速定位问题。


如果还是不能解决问题可以进群讨论一下:1076478372 (qq)

相关


Echarts 大小自适应的解决办法

echarts查看版本

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章