關於echarts圖表在tab頁中width:100%失效的問題

這篇文章主要介紹了關於echarts圖表在tab頁中width:100%失效的問題，現在分享給大家，有需要的朋友可以參考一下

在使用echarts時，寫在tab頁中的圖表寬度明明設定為100%，但是在頁面上實際卻只有100px寬

<p id="chartMain" style="width:100%;height:300px"></p>

原因很簡單，在tab頁中，圖表的父容器p是隱藏的（display：none），圖表在執行js初始化的時候找不到這個元素，所以自動將“100%”轉成了“100”，最後計算出來的圖表就成了100px

解決方法：

　　找一個在tab頁的切換操作中不會隱藏的父容器，把它的寬度的具體值取出後在初始化圖表之前直接賦給圖表

1 $("#chartMain").css('width',$("#TabContent").width());//获取父容器的宽度具体数值直接赋值给图表以达到宽度100%的效果
2 var Chart = echarts.init(document.getElementById('chartMain'));
3 
4 // 指定图表的配置项和数据
5 option = { ...配置项和数据 };
6 
7 // 使用刚指定的配置项和数据显示图表。
8 Chart.setOption(option);

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決ligerUI佈局時Center中的Tab高度大小

#

以上是關於echarts圖表在tab頁中width:100%失效的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！