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