tab選項卡時無法正常顯示echarts影象的解決方案
阿新 • • 發佈:2018-12-28
https://blog.csdn.net/wayne1998/article/details/79783480
HTML
<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>
JS
//獲取圖表容器 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);