结合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" >
排课情况统计
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;">div>
<div id="pkDiv2" style="width:100%;height:400px;">div>
div>
div>
div>
div>
js
<script>
Vue.prototype.$echarts = echarts;
new Vue({
el: '#kpktj',
data: {
barOption1: {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
top: 30,
data: []
},
toolbox: {
show: true,
top: 10,
feature: {
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: [],
axisLabel: { //调整x轴的lable
formatter: function (value) {
return value.split("").join("\n");
},
textStyle:{
fontSize:8 // 设置字体大小
}
}
}
],
yAxis: [
{
type: 'value',
splitNumber: 3
}
],
series: [
{
name: '',
type: 'bar',
data: [],
label: {
normal: {
show: true,
position: 'top'
}
}
},
{
name: '',
type: 'bar',
data: [],
label: {
normal: {
show: true,
position: 'top'
}
}
}
]
},
barOption2: {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
top: 30,
data: []
},
toolbox: {
show: true,
top: 10,
feature: {
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: [],
axisLabel: { //调整x轴的lable
formatter: function (value) {
return value.split("").join("\n");
},
textStyle:{
fontSize:8 // 让字体变大
}
}
}
],
yAxis: [
{
type: 'value',
splitNumber: 3
}
],
series: [
{
name: '',
type: 'bar',
data: [],
label: {
normal: {
show: true,
position: 'top'
}
}
},
{
name: '',
type: 'bar',
data: [],
label: {
normal: {
show: true,
position: 'top'
}
}
}
]
},
},
mounted () {
this.getSchYearInfo();
this.getKKCount();
this.getPKCount();
},
methods: {
getSchYearInfo(){
var date = new Date();
var year = date.getFullYear();
var html = "";
for(var i=0;i<=4;i++){
var val = year-i;
var val1 = year-i+1;
if(val==year){
html +="+val+"-"+val1+"学年";
}else{
html +="+val+"-"+val1+"学年";
}
}
$("#kpktj").find("select[name='xn']").append(html);
},
getKKCount(){
var xn = $("#tab1 select[name='xn'] option:selected").val();
var xq = $("#tab1 select[name='xq'] option:selected").val();
console.log("xn:"+xn);
var option = this.barOption1;
var $echarts = this.$echarts;
var div = $("#tab1 div[name='kkDiv']")[0];
$.ajax({
type : 'post',
url : '${nfAjax}/wap/CssWapKpk/r-getKkCount?t='+ $.now(),
async: false,
data: {
"xn": xn,
"xq": xq,
"jwloginToken": window.localStorage.getItem("token")
},
dataType:'json',
success: function (json) {
if(json.err > 0){
var msg = json.msg;
$.alert(msg);
}else {
var res = json.msg.list;
option.legend.data.splice(0, option.legend.data.length, "开课数", "停课数");
option.xAxis[0].data.splice(0, option.xAxis[0].data.length);
option.series[0].data.splice(0, option.series[0].data.length);
option.series[0].name = '开课数';
option.series[1].data.splice(0, option.series[1].data.length);
option.series[1].name = '停课数';
for (var i = 0; i < res.length; i++) {
if(res[i].xymc!='合计'){
option.xAxis[0].data.push(res[i].xymc);
option.series[0].data.push(res[i].kktotal);
option.series[1].data.push(res[i].total-res[i].kktotal);
}
};
$echarts.init(div).setOption(option);
}
},
error: function () {
$.alert("获取数据失败，请联系管理人员！");
}
});
},
getPKCount(){
var xn = $("#tab2 select[name='xn'] option:selected").val();
var xq = $("#tab2 select[name='xq'] option:selected").val();
var option1 = this.barOption1;
var option2 = this.barOption2;
var $echarts = this.$echarts;
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var div1 = document.getElementById('pkDiv1');
var div2 = document.getElementById('pkDiv2');
var resizeMainContainer = function () {//设置div容器高宽
div1.style.width = window.innerWidth+'px';
div1.style.height = window.innerHeight+'px';
div2.style.width = window.innerWidth+'px';
div2.style.height = window.innerHeight+'px';
};
resizeMainContainer(); // 初始化图表
var echarts1 = $echarts.init(div1);
var echarts2 = $echarts.init(div2);
$(window).on('resize',function(){//屏幕大小自适应，重置容器高宽
resizeMainContainer();
mainChart.resize();
});
$.ajax({
type : 'post',
url : '${nfAjax}/wap/CssWapKpk/r-getPkCount?t='+ $.now(),
async: false,
data: {
"xn": xn,
"xq": xq,
"jwloginToken": window.localStorage.getItem("token")
},
dataType:'json',
success: function (json) {
if(json.err > 0){
var msg = json.msg;
$.alert(msg);
}else {
var res = json.msg.list;
option1.title.text = "课程排课情况统计";//统计标题
option1.legend.data.splice(0, option1.legend.data.length, "排课总课程数", "零教学班课程数");
option1.xAxis[0].data.splice(0, option1.xAxis[0].data.length);
option1.series[0].data.splice(0, option1.series[0].data.length);
option1.series[0].name = '排课总课程数';
option1.series[1].data.splice(0, option1.series[1].data.length);
option1.series[1].name = '零教学班课程数';
option2.title.text = "教学班总排课情况统计";//统计标题
option2.legend.data.splice(0, option2.legend.data.length, "已排教学班", "未排教学班");
option2.xAxis[0].data.splice(0, option2.xAxis[0].data.length);
option2.series[0].data.splice(0, option2.series[0].data.length);
option2.series[0].name = '已排教学班';
option2.series[1].data.splice(0, option2.series[1].data.length);
option2.series[1].name = '未排教学班';
for (var i = 0; i < res.length; i++) {
if(res[i].xymc!='合计'){
option1.xAxis[0].data.push(res[i].xymc);
option1.series[0].data.push(res[i].kkTotal);
option1.series[1].data.push(res[i].zeroJxbKcTotal);
option2.xAxis[0].data.push(res[i].xymc);
option2.series[0].data.push(res[i].jxbypTotal);
option2.series[1].data.push(res[i].jxbTotal-res[i].jxbypTotal);
}
};
}
},
error: function () {
$.alert("获取数据失败，请联系管理人员！");
}
});
echarts1.setOption(option1);
echarts2.setOption(option2);
},
setDiv(){
var a = document.getElementById('pkDiv1');
var b = document.getElementById('pkDiv2');
a.style.width = '100%';
a.style.height = '400px';
b.style.width = '100%';
b.style.height = '400px';
}
}
})
</script>