tab选项卡时无法正常显示echarts图像的解决方案

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);