微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

问题:

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

2. echarts自适应怎么实现?

解决办法:

rush:js;"> //解决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" 根据前面所用标签页的不同来选择
rush:js;"> //echarts自适应 var charts = []; var chart1 = echarts.init(document.getElementById("left1")); var chart2 = echarts.init(document.getElementById("left2")); var chart3 = echarts.init(document.getElementById("right11")); var chart4 = echarts.init(document.getElementById("right12")); var chart5 = echarts.init(document.getElementById("right21")); var chart6 = 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(var i = 0; i < charts.length; i++) { charts[i].resize(); } })

下面看一个实现的demo:

demo 完成内容

1. bootstrap实现响应式布局

2. echats实现自适应

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐