0
点赞
收藏
分享

微信扫一扫

tab标签页切换时Echarts加载不正常的问题


切换tab选项卡时Echarts加载不正常的问题

  • ​​一、问题描述​​
  • ​​二、解决方案:​​
  • ​​三、拓展​​

一、问题描述

我有两个选项卡,一个用来显示Echarts图表,一个用来显示Echarts图表的数据源

tab标签页切换时Echarts加载不正常的问题_echarts


但是我切换到数据源的选项卡后再改变浏览器窗口大小时,这是再切换回echarts图表的选项卡就会出现:

tab标签页切换时Echarts加载不正常的问题_javascript_02

可以看到,图形渲染失败了

二、解决方案:

var charts=[];
var injectionWaterChart=echarts.init(document.getElementById('echarts_InjectionWater'));
var pressChart=echarts.init(document.getElementById('echarts_Press'));
var createDaysChart=echarts.init(document.getElementById('echarts_CreateDays'));
charts.push(injectionWaterChart);
charts.push(pressChart);
charts.push(createDaysChart);
//解决tab切换后改变窗口大小时不显示问题 在加载窗口后重新渲染。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var activeTab = $(e.target)[ 0 ].hash;
if (activeTab=='#tab-1'){
for(var i=0;i<charts.length;i++){
charts[i].resize(); //适应div大小
}
}
}); //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择

就是再次切换回图表选项卡的时候,调用restore()方法,将图表数据还原即可,那个tab-1是我图表选项卡中tab标签的id。

三、拓展

tab标签页切换时Echarts加载不正常的问题_数据可视化_03


 

举报

相关推荐

0 条评论