好资源导航 » 文章资讯 » Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

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

2023-09-10 08:57:05 572

问题：

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.标签页切换、缩放正常显示

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

.css_height{
height:400px;
margin-top:30px;
}
.css_height1{
height:400px;
margin-top:72px;
}
.right_title{
width:90%;
margin-left:10%;
}
.nav>li>a{
padding:5px18px;
margin-top:10px;
}
body{
background-color:#009688;
}
.container{
background-color:#dcedf5;
margin-top:25px;
border-radius:15px;
}

option1={
title:{
text:'未来一周气温变化',
subtext:'纯属虚构'
},
tooltip:{
trigger:'axis'
},
xAxis:{
type:'category',
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value',
axisLabel:{
formatter:'{value}°C'
}
},
series:[{name:'最高气温',type:'line',data:[11,11,15,13,12,13,10],
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1,-2,2,5,3,2,0],
markPoint:{
data:[
{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
]
},
markLine:{
data:[
{type:'average',name:'平均值'},
[{symbol:'none',x:'90%',yAxis:'max'},{symbol:'circle',label:{normal:{position:'start',formatter:'最大值'}},type:'max',name:'最高点'}]
]
}
}
]
};
option2={
title:{
text:'大规模散点图'
},
legend:{
data:['sin','cos']
},
xAxis:[{type:'value',scale:true}],
yAxis:[{type:'value',scale:true}],
series:[{name:'sin',type:'scatter',large:true,symbolSize:3,data:(function(){vard=[];
varlen=10000;
varx=0;
while(len--){
x=(Math.random()*10).toFixed(3)-0;
d.push([
x,
//Math.random()*10
(Math.sin(x)-x*(len%2?0.1:-0.1)*Math.random()).toFixed(3)-0
]);
}
//console.log(d)
returnd;
})()
},
{
name:'cos',
type:'scatter',
large:true,
symbolSize:2,
data:(function(){
vard=[];
varlen=20000;
varx=0;
while(len--){
x=(Math.random()*10).toFixed(3)-0;
d.push([
x,
//Math.random()*10
(Math.cos(x)-x*(len%2?0.1:-0.1)*Math.random()).toFixed(3)-0
]);
}
//console.log(d)
returnd;
})()
}
]
};

demo效果链接： demo

github源码：源码 | 本地下载

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐