echarts使用tab效果切换时,除了第一个对于的图表，其他对应的图表在切换时都不显示，求大神指点啊！！

zhm0707 2015-05-11 10:36:32

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<style>
.formTab ul{ height:30px;}
.formTab ul{ margin:10px 0}
.formTab ul li{ float:left; background-color:#FDFDFD; color:#222; line-height:30px; padding:0 15px; margin-right:-1px; border:1px solid #C3C3C3}
.formTab ul li.on{ background-color:#25BDFF; color:#FFF}
.echarts li div{ width:100%; min-height:500px;}

.echarts > li{ width:100%; display:none; min-height:500px;}
</style>
<script type="text/javascript">
$(".table .formTab ul li").first().addClass("on");
//$(".echarts li").show()
$(".echarts li").first().show();
$(".table .formTab ul li").bind("click",function(){
$(this).addClass("on").siblings().removeClass("on");
$('.echarts li:eq('+ $('.table .formTab ul li').index(this) +')').show().siblings("li").hide();
})

var xHoursTime=['0-1min','1-3min','3-10min','10-30min','30-60min','1h-3h','>=3h']

var todayTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
var todayDown = [35,80,40,30,25,55,2];
var todayInstall =[25,35,20,10,22,18,1];
var todayLogin = [15,20,10,15,15,50,33,36,20];
var yestTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
var yestDown = [5,0,0,0,0,0,10,15,15,20,10,15,15,20,50,35,80,40,30,25,55,80,93,76,20];
var yestInstall =[5,0,0,0,0,0,10,10,11,15,10,15,15,16,40,25,35,20,10,22,18,70,43,56,20];
var yestLogin = [3,0,0,0,0,0,10,10,11,15,10,15,15,16,20,15,15,20,10,15,15,50,33,36,20];

// 路径配置
require.config({
paths:{
//echarts:'../js/build/dist'
echarts:'http://echarts.baidu.com/build/dist/'
}
})
//使用
require(
[
'echarts',
'echarts/chart/funnel',
'echarts/chart/pie',
'echarts/chart/line',
'echarts/chart/bar'
],
function(ec) {
//今日点击下载安装
var todayNum = ec.init(document.getElementById('todayNum'));
window.onresize = todayNum.resize;
todayNum.setOption({
title : {
text:'机会多APP每次启动使用时长'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['活跃用户','启动次数']
},
toolbox: {
show : true,
orient : 'vertical',
y : 'center',
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : true,
data:xHoursTime,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'活跃用户',
type:'bar',
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
data:todayDown,

},
{
name:'启动次数',
type:'bar',
data: todayInstall,
},
]
});

var todayNumPie = ec.init(document.getElementById('todayNumPie'));
window.onresize = todayNumPie.resize;
todayNumPie.setOption({
title : {
text: '每次启动使用时长',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:xHoursTime
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', 225],
data:[
{value:35, name:'0-1min'},
{value:80, name:'1-3min'},
{value:40, name:'3-10min'},
{value:30, name:'10-30min'},
{value:25, name:'30-60min'},
{value:55, name:'1h-3h'},
{value:2, name:'>=3h'}
]
}
]
});

//昨日新增
var YesNum = ec.init(document.getElementById('YesNum'));
window.onresize = YesNum.resize;
YesNum.setOption({
title : {
text:'昨日活跃用户量'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
//type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['DAU','新用户','老用户']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : 30,
end : 70
},
xAxis : [
{
type : 'category',
boundaryGap : true,
data:todayTime,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'DAU',
type:'line',
data:yestDown,
},
{
name:'新用户',
type:'line',
data: yestInstall,
},
{
name:'老用户',
type:'line',
data: yestLogin,
}
]
});

//近7日点击下载安装

var weeksNum = ec.init(document.getElementById('weeksNum'));
window.onresize = weeksNum.resize;
weeksNum.setOption({
title : {
text:'近7日活跃用户'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
//type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['DAU','新用户','老用户']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//dataZoom : {show : true,realtime : true,start : 30,end : 70},
xAxis : [
{
type : 'category',
boundaryGap : true,
data : sevenTime,
}
],
yAxis : [
{type : 'value'}
],
series : [
{
name:'DAU',
type:'line',
data:sevenDown,
},
{
name:'新用户',
type:'line',
data:sevenInstall,
},
{
name:'老用户',
type:'line',
data:sevenLogin,
}
]
});

}
);

</script>
</head>

<body>
<div class="table">
<div class="formTab">
<ul><li>今天</li><li>昨天</li><li>近七天</li></ul>
</div>
<ul class="echarts">
<li><div id="todayNumPie" style="width:45%; float:left;"></li>
<li><div id="YesNum"></div></li>
<li><div id="todayNum" style="width:50%; float:left;"></div></li>

</ul>

</div>

</body>
</html>

...全文

14887 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

daihao1996 2018-12-04

打赏
举报

引用 8 楼 baidu_35446088 的回复:

什么意思啊,没看懂

没看懂加一

猪坚强__ 2018-10-23

打赏
举报

引用 17 楼 bladeandmaster88 的回复:

垃圾，我已经有很好的方法了

你好，你分享一下呗，怎么解决的啊？

qq_38922056 2017-10-25

打赏
举报

请求数据局部刷新重新画canvas

bladeandmaster88 2017-09-14

打赏
举报

垃圾，我已经有很好的方法了

bladeandmaster88 2017-09-14

打赏
举报

具体怎么弄的，话说一半。。

半途流浪 2017-07-07

打赏
举报

我之前遇到过切换之后原页面压缩，我的处理方法是，tab点击后再次执行加载你echarts的方法。

白白的一团团 2017-07-05

打赏
举报

请问判断后怎么加载图表，也就是loadDay() loadWeek() loadMonth()是什么意思？请赐教

qq_23877403 2017-06-07

打赏
举报

遇到同样问题，可是仍然不知该如何解决，求小伙伴赐教

yaya0144 2017-03-22

打赏
举报

六楼正解，非常感谢

qq_36027826 2016-12-14

打赏
举报

6楼正解真心感谢！我刚好也是用了bootstrap的tab插件，太稳了~~~~

babygourd 2016-11-20

打赏
举报

楼主解决这个问题了么？

qq_20094931 2016-10-19

打赏
举报

解决没有啊我这边也有这个问题！但是缩下浏览器大小就能出来或者打开firbug

baidu_35446088 2016-06-28

打赏
举报

什么意思啊,没看懂

EricWLF 2016-06-08

打赏
举报

6楼的整的啥玩意儿啊....

zl_9308 2016-02-24

打赏
举报

我是这么做的，供大家参考。
关键就是在tab转换的时候div是没有height的，所有要在标签页显示后有了width和height之后再加载图表。
tab有show.bs.tab和shown.bs.tab两种，要选择shown显示后的

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

       // 获取已激活的标签页的名称

       var activeTab = $(e.target)[0].hash;

       if(activeTab=="#day-div") loadDay();//加载图表

       if(activeTab=="#week-div") loadWeek();

       if(activeTab=="#month-div") loadMonth();  

       });

蚂蚁小帅哥 2015-12-21

打赏
举报

楼主解决了没有啊！这边也遇到了同样的问题，还没有解决方案！

startxp 2015-11-06

打赏
举报

同问，请问楼主解决了么？

zymqqking 2015-06-03

打赏
举报

楼主解决了没有，这个问题？？

zhm0707 2015-05-13

打赏
举报

重新编辑了一下，很感谢楼上的回复，但是问题还没解决 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <style> .formTab ul{ height:30px;} .formTab ul{ margin:10px 0} .formTab ul li{ float:left; background-color:#FDFDFD; color:#222; line-height:30px; padding:0 15px; margin-right:-1px; border:1px solid #C3C3C3} .formTab ul li.on{ background-color:#25BDFF; color:#FFF} .echarts li div{ width:100%; min-height:500px;} .echarts > li{ width:100%; display:none; min-height:500px;} </style> </head> <body> <div class="table"> <div class="formTab"> <ul><li>今天</li><li>昨天</li><li>近七天</li></ul> </div> <ul class="echarts"> <li><div id="todayNumPie" ></li> <li><div id="YesNum"></div></li> <li><div id="weeksNum"></div></li> </ul> </div> <script type="text/javascript"> $(".table .formTab ul li").first().addClass("on"); //$(".echarts li").show() $(".echarts li").first().show(); $(".table .formTab ul li").bind("click",function(){ $(this).addClass("on").siblings().removeClass("on"); $('.echarts li:eq('+ $('.table .formTab ul li').index(this) +')').show().siblings("li").hide(); }) var xHoursTime=['0-1min','1-3min','3-10min','10-30min','30-60min','1h-3h','>=3h'] var todayTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] var todayDown = [35,80,40,30,25,55,2]; var todayInstall =[25,35,20,10,22,18,1]; var todayLogin = [15,20,10,15,15,50,33,36,20]; var yestTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23] var yestDown = [5,0,0,0,0,0,10,15,15,20,10,15,15,20,50,35,80,40,30,25,55,80,93,76,20]; var yestInstall =[5,0,0,0,0,0,10,10,11,15,10,15,15,16,40,25,35,20,10,22,18,70,43,56,20]; var yestLogin = [3,0,0,0,0,0,10,10,11,15,10,15,15,16,20,15,15,20,10,15,15,50,33,36,20]; // 路径配置 require.config({ paths:{ echarts:'http://echarts.baidu.com/build/dist/' } }) //使用 require( [ 'echarts','echarts/chart/funnel','echarts/chart/pie','echarts/chart/line','echarts/chart/bar' ], function(ec) { //今日点击下载安装 var todayNumPie = ec.init(document.getElementById('todayNumPie')); window.onresize = todayNumPie.resize; todayNumPie.setOption({ title : {text: '每次启动使用时长',x:'center'}, tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"}, legend: {orient : 'vertical',x : 'left',data:xHoursTime}, calculable : true, series : [ {name:'访问来源',type:'pie',radius : '55%',center: ['50%', 225], data:[ {value:35, name:'0-1min'},{value:80, name:'1-3min'},{value:40, name:'3-10min'},{value:30, name:'10-30min'},{value:25, name:'30-60min'},{value:55, name:'1h-3h'},{value:2, name:'>=3h'} ]} ] }); //昨日新增 var YesNum = ec.init(document.getElementById('YesNum')); window.onresize = YesNum.resize; YesNum.setOption({ title : { text:'昨日活跃用户量' }, tooltip : {trigger: 'axis',axisPointer:{show: true,lineStyle: {type : 'dashed',width : 1}},}, legend: {data:['DAU','新用户','老用户']}, calculable : true, dataZoom : {show : true,realtime : true,start : 30,end : 70}, xAxis : [{type : 'category',boundaryGap : true,data:todayTime,}], yAxis : [{type : 'value'}], series : [ {name:'DAU',type:'line',data:yestDown,}, {name:'新用户',type:'line',data: yestInstall,}, {name:'老用户',type:'line',data: yestLogin,} ] }); //近7日点击下载安装 var weeksNum = ec.init(document.getElementById('weeksNum')); weeksNum.setOption({ title : { text:'近7日活跃用户量' }, tooltip : {trigger: 'axis',axisPointer:{show: true,lineStyle: {type : 'dashed',width : 1}},}, legend: {data:['DAU','新用户','老用户']}, calculable : true, dataZoom : {show : true,realtime : true,start : 30,end : 70}, xAxis : [{type : 'category',boundaryGap : true,data:todayTime,}], yAxis : [{type : 'value'}], series : [ {name:'DAU',type:'line',data:yestDown,}, {name:'新用户',type:'line',data: yestInstall,}, {name:'老用户',type:'line',data: yestLogin,} ] }); } ); </script> </body> </html>

业余草 2015-05-12

打赏
举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> 
<style>
.formTab ul{ height:30px;}
.formTab ul{ margin:10px 0}
.formTab ul li{ float:left; background-color:#FDFDFD; color:#222; line-height:30px; padding:0 15px;  margin-right:-1px; border:1px solid #C3C3C3}
.formTab ul li.on{ background-color:#25BDFF; color:#FFF}
.echarts li div{ width:100%; min-height:500px;}

.echarts > li{ width:100%; display:none; min-height:500px;}
</style>
<script type="text/javascript">
$(".table .formTab ul li").first().addClass("on");
//$(".echarts li").show()
$(".echarts li").first().show();
$(".table .formTab ul li").bind("click",function(){
$(this).addClass("on").siblings().removeClass("on");
$('.echarts li:eq('+ $('.table .formTab ul li').index(this) +')').show().siblings("li").hide();
})

var xHoursTime=['0-1min','1-3min','3-10min','10-30min','30-60min','1h-3h','>=3h']


var todayTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
var todayDown =   [35,80,40,30,25,55,2];
var todayInstall =[25,35,20,10,22,18,1];
var todayLogin =  [15,20,10,15,15,50,33,36,20];
var yestTime =[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
var yestDown =   [5,0,0,0,0,0,10,15,15,20,10,15,15,20,50,35,80,40,30,25,55,80,93,76,20];
var yestInstall =[5,0,0,0,0,0,10,10,11,15,10,15,15,16,40,25,35,20,10,22,18,70,43,56,20];
var yestLogin =  [3,0,0,0,0,0,10,10,11,15,10,15,15,16,20,15,15,20,10,15,15,50,33,36,20];

// 路径配置 
require.config({
paths:{
//echarts:'../js/build/dist'
echarts:'http://echarts.baidu.com/build/dist/'
}
})
//使用
require(
        [
            'echarts',
            'echarts/chart/funnel',
            'echarts/chart/pie',
'echarts/chart/line',
'echarts/chart/bar'
        ],
        function(ec) {
//今日点击 下载 安装
var todayNum = ec.init(document.getElementById('todayNum'));
window.onresize = todayNum.resize;
todayNum.setOption({
title : {
text:'机会多APP每次启动使用时长'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['活跃用户','启动次数']
},
toolbox: {
show : true,
orient : 'vertical',
        y : 'center',
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : true,
data:xHoursTime,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'活跃用户',
type:'bar',
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
data:todayDown,

},
{
name:'启动次数',
type:'bar',
data: todayInstall,
},
]           
});

var todayNumPie = ec.init(document.getElementById('todayNumPie'));
window.onresize = todayNumPie.resize;
todayNumPie.setOption({
title : {
text: '每次启动使用时长',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:xHoursTime
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', 225],
data:[
{value:35, name:'0-1min'},
{value:80, name:'1-3min'},
{value:40, name:'3-10min'},
{value:30, name:'10-30min'},
{value:25, name:'30-60min'},
{value:55, name:'1h-3h'},
{value:2, name:'>=3h'}
]
}
]
});

//昨日 新增
var YesNum = ec.init(document.getElementById('YesNum'));
window.onresize = YesNum.resize;
YesNum.setOption({
title : {
text:'昨日活跃用户量'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
//type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['DAU','新用户','老用户']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
dataZoom : {
show : true,
realtime : true,
start : 30,
end : 70
},
xAxis : [
{
type : 'category',
boundaryGap : true,
data:todayTime,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'DAU',
type:'line',
data:yestDown,
},
{
name:'新用户',
type:'line',
data: yestInstall,
},
{
name:'老用户',
type:'line',
data: yestLogin,
}
]           
});

//近7日点击 下载 安装

var weeksNum = ec.init(document.getElementById('weeksNum'));
window.onresize = weeksNum.resize;
weeksNum.setOption({
title : {
text:'近7日活跃用户'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
//type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
},
legend: {
data:['DAU','新用户','老用户']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//dataZoom : {show : true,realtime : true,start : 30,end : 70},
xAxis : [
{
type : 'category',
boundaryGap : true,
data : sevenTime,
}
],
yAxis : [
{type : 'value'}
],
series : [
{
name:'DAU',
type:'line',
data:sevenDown,
},
{
name:'新用户',
type:'line',
data:sevenInstall,
},
{
name:'老用户',
type:'line',
data:sevenLogin,
}
]           
});

        }
    );


</script>
</head>


<body>
<div class="table">
<div class="formTab">
                   	 <ul><li>今天</li><li>昨天</li><li>近七天</li></ul>
                   </div>
                   <ul class="echarts">
                       <li><div id="todayNumPie" style="width:45%; float:left;"></li>
                       <li><div id="YesNum"></div></li>
                       <li><div id="todayNum" style="width:50%; float:left;"></div></li>
                       
                    </ul>

</div>

</body>
</html>
更多 0