vue + g2 在 new chart 时报错:cannot read properties of null (reading ‘appendchild’)”
这个问题起因是因为id为c11的div标签不存在导致的,在g2画图之前,div并未渲染
能够在画图之前用 document.getElementById 获取一下 DOM,打印进去为 null
解决办法:
一、应用 this.$nextTick 办法
this.$nextTick( () => {
//new chart
})
二、应用 setTimeout 办法
setTimeout(() => {
//new chart
})
三、在 new chart 之前用 js 增加一个 DOM
let div = document.createElement("div"); //创立 div 标签
div.id = 'pillarBox'; //设置 div 的 id属性
div.style.width = '94%'; //设置 div 的 css 款式
div.style.margin = '50px 20px 0 20px'; //设置 div 的 css 款式
let parent = document.getElementsByClassName('echart-content'); //获取父节点
parent[0].appendChild(div); //增加到父节点
if (document.getElementById('pillarBox')) { //判断是否存在容器节点
_this.pillar = new G2.Chart({ //初始化一个柱状图
container: 'pillarBox',
autoFit: true,
height: 400,
});
}
发表回复