产生这个的原因是因为tab栏切换时使用的display:none;和display:block,页面中第一个是默认显示的所以不受影响,但是因为后面使用的都是display:none;所以echarts在初始化的时候就监测不到这个echarts的存在,而echarts最小宽度是100px,所以在点击切换之后 echarts会显示为100px;
可以给盒子直接设置固定的宽度,但是这样就达不到自适应的效果了。 juqery解决方案-先监听他的点击事件,在去监听他浏览器页面缩放的情况,让他达到自适应。
// 监听点击事件
window.addEventListener("click",function(){
myechartPool.resize();
})
// 监听浏览器页面缩放事件
window.addEventListener("resize", function () {
myechartPool.resize();
});
vue解决方案: 使用v-if 重新渲染