本文為博主原創，未經允許，不得轉載：

在兩個tab頁中，分別展現了兩個echart圖表，同樣的格式與寫法，但只有在默認選中的tab頁中的圖表顯示的是正常的，

但進入另一個tab頁中時，圖表則產生了變形的問題，如下圖所示：

在網上查了很多，有各種方法，嘗試之后也并沒有改變變形的問題，

??????? 終極原因是在頁面進行加載時，隱藏的圖表找不到對應的div大小，所以默認給了一個大小。所以要做的就是在頁面加載時，

就對圖表進行初始化。

????? 用到的方法如下：

<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#chart1" data-toggle="tab">tab1</a></li><li><a href="#chart2" data-toggle="tab" οnclick="javascript:chartresize()">tab2</a></li><div class="tab-content"><div class="tab-pane fade in active" id="chart1" style="width=100%;height=100%"></div><div class="tab-pane fade" id="chart2"></div></div> </ul>function chartresize(){console.log("chartresize");var temp = new initchart();temp.resize(); }var initchart = function(){var chart2 = echarts.init(document.getElementById('chart2'));var chart2_option={series: [{type: 'pie',radius: '55%',center: ['50%', '50%'],data:[{value:10, name: 'pie1'},{value:20, name: 'pie2'},{value:10, name: 'pie3'},]}]}chart2.setOption(chart2_option);$(function(){window.onresize = function(){chart2.resize();}})this.resize = function size(){var chart2div=document.getElementById('chart2');var tabcontent = document.getElementById('tab-content');width=tabcontent.offsetWidth;height=tabcontent.offsetHeight;chart2div.style.width=width+'px';chart2div.style.height=height+'px';chart2.resize(width,height);} }

?修改之后的效果圖為：

?

轉載于:https://www.cnblogs.com/zjdxr-up/p/8001338.html

總結

以上是生活随笔為你收集整理的切换tab页时，tab页中的echart变形问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。