2020-7-14 前端達人
最近在項目中遇到這樣一個問題
當頁面加載完畢后由于選項卡的另外兩張屬于display：none；狀態 所以另外兩張選項卡內echarts的寬高都會變成默認100*100
查閱了很多網上的案例，得出一下一些解決方案：
1：
原因很簡單，在tab頁中，圖表的父容器div是隱藏的（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);
2：mychart.resize() 重新渲染高度
3: 后來我想到了問題所在，既然高度是因為display：none；導致的 那大可不必設置這個屬性，但是在頁面渲染完畢后加上即可
所以取消了選項卡的display：none； 但在頁面加載完畢后
window.οnlοad=function(){
根基id在添加css display：none；
}
即可解決，
分割線
---------------------------------------------------------------------
接下來解決一下ifram內外通訊 互相通訊賦值ifram src 和高度問題