结合WEUI,VUE.JS 解决ECharts Can't get dom width or height!无法初始化图表的问题

最近在企业微信上编写一个统计图的页面，使用的是echarts来做统计图形。ui使用的是weui，js使用vue.js。
有两个tab页，页面加载的时候就将两个tab页的统计图都加载出来。但是，发现只有第一tab页的统计图是完好的，第二个tab页的统计图缩小了，不能完好的显示，这时返现报错：Can’t get dom width or height

查了资料，原来是echarts读取dom的时候，也就是对应的div由于weui的css设置的问题，将tab2的整个div都设置成displays:none了，导致echarts.init(div)如何读取到div的长宽。所以就要在加载tab2的统计图时候重新设置DIV的长宽。
var div1 = document.getElementById(‘pkDiv1’); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var div1 = document.getElementById(‘pkDiv1’);
var div2 = document.getElementById(‘pkDiv2’);
var resizeMainContainer = function () {
div1.style.width = window.innerWidth+‘px’;// window.innerWidth+‘px’
div1.style.height = window.innerHeight+‘px’;//window.innerHeight0.8+‘px’
div2.style.width = window.innerWidth+‘px’;// window.innerWidth+‘px’
div2.style.height = window.innerHeight+‘px’;//window.innerHeight0.8+‘px’
}; //设置div容器高宽
resizeMainContainer(); // 初始化图表
var echarts1 = $echarts.init(div1);
var echarts2 = $echarts.init(div2);
$(window).on(‘resize’,function(){//屏幕大小自适应，重置容器高宽
resizeMainContainer();
mainChart.resize();
});
最后再setOption();
echarts1.setOption(option1);
echarts2.setOption(option2);

HTML

<div id="kpktj">
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
                开课情况统计
            </a>
            <a class="weui-navbar__item" href="#tab2" ><!--@click="getPKCount"-->
                排课情况统计
            </a>
        </div>

        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div>
                    <select class="select" name="xn" style="float: left" @change="getKKCount"></select>
                    <select class="select" name="xq" @change="getKKCount">
                        <option value="1" checked="checked">第1学期</option>
                        <option value="2">第2学期</option>
                    </select>
                </div>
                <div name="kkDiv" style="width: 100%;height:400px;"></div>
            </div>

            <div id="tab2" class="weui-tab__bd-item">
                <div >
                    <select class="select" name="xn" style="float: left" @change="getPKCount"></select>
                    <select class="select" name="xq" @change="getPKCount">
                        <option value="1" checked="checked">第1学期</option>
                        <option value="2">第2学期</option>
                    </select>
                </div>
                <div id="pkDiv1" style="width:100%;height:400px;<