關於使用bootstrap的tab選項卡時無法正常顯示echarts影象的解決方案
阿新 • • 發佈:2019-01-26
最近做一個專案時,用到了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上寫文章,如有寫的不好的地方歡迎各位指出.