https://blog.csdn.net/cjs68/article/details/78072382
tab切换时候，第一个图正常显示，第二个及之后的图无法正常显示。 问题是这样的，用了两个tab切换，每个tab里面加载一个echarts图表，div的大小是百分比设置的，结果第一个echarts可以正常显示出来，第二个echarts被严重压缩了。 查看了一下网页布局，发现div是有大小的，但是里面加载的echarts宽高都是0，这可能就是echarts显示过小的原因。 有以下三个解决办法：
将div的宽高设置成固定值，比如style=”width:500px;height:500px”，这时候echarts有了明确的大小时候就可以正常显示出来了。（不过这个方法还是不好，固定值的高宽无法自适应网页大小啊） 在点击第二个tab的时候获取父div的宽和高，将具体的宽和高赋值给echarts，如何在这个方法里面初始化echarts，而不要再加载网页的时候就初始化。 具体的代码如下： <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> 1 2 3 4 5 6 7 8 9 10 11 12 13 chartresize()方法如下：
function chartresize(){ console.log("chartresize"); var temp = new initchart(); temp.resize(); } 1 2 3 4 5 初始化echarts的方法如下：
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); } } 这样每次在点击第二个tab的时候就会重新加载下chart2了，就不会出现chart过小的问题。 3、设置tab切换时候加载时间 代码如下：
$("a[data-toogle='tab']").on("shown.bs.tab",function(e){ var activeTab=$(e.target)[0].hash; if(activeTab == "#tab1"){ window.onresize(); } if(activeTab == "#tab2"){ window.onresize(); } } echarts的初始化跟正常的方式一样，不过记得将tab-content中的echarts高宽设为100%。
