最近做一个项目时,用到了echarts实现数据可视化,因为之前没怎么接触过echarts,导致在使用echarts时踩了不少的坑,其中一个就是关于“使用bootstrap的tab选项卡时无法正常显示echarts图像”的问题。在百度上找了很久,尝试了各种各样的解决方案,终于能让图像随着tab选项卡的切换正常显示了。解决方法容本菜鸡细细道来。
项目中的大致要求如上图所示,当页面加载完成时,“本日”高亮,并且加载“本日”的图表,当每次点击其他选项时,加载该选项对应的图表(每次点击都必须重新渲染)。
当时一想,这还不简单嘛,每次点击重新init就行了嘛,然而很快被打脸了.先贴上我的tab选项卡部分的代码:
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#thisDay" aria-controls="thisDay" role="tab" data-toggle="tab">本日</a></li>
<li role="presentation"><a href="#thisWeek" aria-controls="thisWeek" role="tab" data-toggle="tab">本周</a></li>
<li role="presentation"><a href="#thisMonth" aria-controls="thisMonth" role="tab" data-toggle="tab">本月</a></li>
<li role="presentation"><a href="#thisQuarter" aria-controls="thisQuarter" role="tab" data-toggle="tab">本季度</a></li>
<li role="presentation"><a href="#thisYear" aria-controls="thisYear" role="tab" data-toggle="tab">本年</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="thisDay">
<div class="input-date-container"></div>
<div class="myTable-container" id="thisDay-container"></div><!--包裹echarts表格的容器-->
</div>
<div role="tabpanel" class="tab-pane" id="thisWeek">
<div class="input-date-container"></div>
<div class="myTable-container" id="thisWeek-container"></div>
</div>
<div role="tabpanel" class="tab-pane" id="thisMonth">
<div class="input-date-container"></div>
<div class="myTable-container" id="thisMonth-container"></div>
</div>
<div role="tabpanel" class="tab-pane" id="thisQuarter">
<div class="input-date-container"></div>
<div class="myTable-container" id="thisQuarter-container"></div>
</div>
<div role="tabpanel" class="tab-pane" id="thisYear">
<div class="input-date-container"></div>
<div class="myTable-container" id="thisYear-container"></div>
</div>
</div>
相关css的代码:
.pic-group-container{
width: 80%;
margin: 0 auto;
}
.pic-group-container > img {
width: 100%;
}
.pic-data-table{
text-align: center;
margin: 0 auto;
}
.myTable-container{
width: 800px;
height: 430px;
}
这样就实现了tab的切换,这样子就实现了tab选项卡的功能,然后就开心的写echarts渲染.代码如下:
var thisDay = document.getElementById('thisDay-container');
var thisWeek = document.getElementById('thisWeek-container');
var thisMonth = document.getElementById('thisMonth-container');
var thisQuarter = document.getElementById('thisQuarter-container');
var thisYear = document.getElementById('thisYear-container');
option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 645, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
var thisDayTable = echarts.init(thisDay);
thisDayTable.setOption(option1);
这个时候我发现除了点击第一个表格能渲染外其余表格均无法渲染,然后对代码进行了部分修改,过程就不再赘述了,相关要点我在下面的代码中进行了注释.
//获取图表容器
var thisDay = document.getElementById('thisDay-container');
var thisWeek = document.getElementById('thisWeek-container');
var thisMonth = document.getElementById('thisMonth-container');
var thisQuarter = document.getElementById('thisQuarter-container');
var thisYear = document.getElementById('thisYear-container');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {//shown.bs.tab为tab选项卡高亮事件,
//关键操作!!!!
// 获取已激活的标签页的名称
var activeTab = $(e.target)[0].hash;//hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)
if(activeTab === "#thisWeek"){//当相应的标签被点击时,进行对应的图表渲染
echarts.dispose(thisWeek);//释放图表实例,使实例不可用,如果不加上这个,会报错:there is a chart instance already initialized on the dom
var thisWeekTable = echarts.init(thisWeek);
thisWeekTable.setOption(option1);
} else if(activeTab === "#thisMonth"){
echarts.dispose(thisMonth);
var thisMonthTable = echarts.init(thisMonth);
thisMonthTable.setOption(option1);
}else if(activeTab === "#thisQuarter"){
echarts.dispose(thisQuarter);
var thisQuarterTable = echarts.init(thisQuarter);
thisQuarterTable.setOption(option1);
}else if(activeTab === "#thisYear"){
echarts.dispose(thisYear);
var thisYearTable = echarts.init(thisYear);
thisYearTable.setOption(option2);
}
});
option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 645, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
var thisDayTable = echarts.init(thisDay);
thisDayTable.setOption(option1);
到此为止,问题总算是解决了,在开发者工具也不会报错了,
效果截图如下:
ps:本人菜鸡一枚,第一次在csdn上写文章,如有写的不好的地方欢迎各位指出.