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查看版本

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