Bootstrap标签页(Tab)插件切换echarts不显示问题的解决

前端之家收集整理的这篇文章主要介绍了Bootstrap标签页(Tab)插件切换echarts不显示问题的解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题:

1. 在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。

2. echarts自适应怎么实现?

解决办法:

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

下面看一个实现的demo:

demo 完成内容

1. bootstrap实现响应式布局

2. echats实现自适应

3. 标签页切换、缩放正常显示

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1">

猜你在找的Bootstrap相关文章