Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
问题:
1. 在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。
2. echarts自适应怎么实现?
解决办法:
//解决tab切换不显示问题在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab',function(e){ for(vari=0;i //echarts自适应 varcharts=[]; varchart1=echarts.init(document.getElementById("left1")); varchart2=echarts.init(document.getElementById("left2")); varchart3=echarts.init(document.getElementById("right11")); varchart4=echarts.init(document.getElementById("right12")); varchart5=echarts.init(document.getElementById("right21")); varchart6=echarts.init(document.getElementById("right22")); chart1.setOption(option1); chart2.setOption(option1); chart3.setOption(option2); chart4.setOption(option2); chart5.setOption(option1); chart6.setOption(option1); charts.push(chart1); charts.push(chart2); charts.push(chart3); charts.push(chart4); charts.push(chart5); charts.push(chart6); $(window).resize(function(){ for(vari=0;i下面看一个实现的demo:
demo完成内容:
1.bootstrap实现响应式布局
2.echats实现自适应
3.标签页切换、缩放正常显示