切换bootstrap的tab时造成echarts图表无法展示问题

时光毁灭记忆、已成空白 提交于 2020-08-15 15:35:13

切换tab时echarts展示异常原因:无法得到高度和宽度造成图形无法展示或者展示过小导致变形

解决方法:

1、全局定义一个echarts数组,用于存放echarts

var myCharts = new Array();

2、页面加载时定义方法重新渲染echarts

//data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择。我使用的是data-toggle="tab"。
//解决tab切换不显示问题 在加载窗口后重新渲染。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    for(var i = 0; i < myCharts.length; i++) {
        myCharts[i].resize();
    }
});

3、将tab下的各个图表加入定义的数组中(这里是myCharts)

myCharts.push(myChart);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!