乐趣区

关于vue.js:g2-报错cannot-read-properties-of-null-reading-appendchild

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,
      });
    }
退出移动版