最近在企业微信上编写一个统计图的页面，使用的是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);