项目场景:

需要根据用户选择的分布模型,在同一块div上显示不同的分布模型。那么就需要复用这一个div容器,我的想法是:在每次换分布模型之前进行一次清除div内的innerHTML。可是出现了问题:在调用清除函数后,我的charts就出不来。

/*
*   清除某容器中内容
* */
function clearContent(containerId) {
    let id = document.getElementById(containerId)
    if (id.hasChildNodes()) {
        id.removeChild(id.firstChild)
        // id.appendChild('')
    }
}

在这里插入图片描述

问题分析:

很容易想到这是容器div里边除了问题,于是我在浏览器的控制台输入了div的对象,如下:
在这里插入图片描述
发现:系统自动还另外在我定义的div中生成一个了div。我立马想到是不是在echarts初始化后,会生成这个div。于是,我把init的代码注释掉后,又在控制台输入div对象,如下:
在这里插入图片描述
发现:之前的未知div不见了。那么证明echarts的init方法,做了生成子div的动作。
在生成chart后,如下:
在这里插入图片描述
发现:又多了一个canvas标签。

结论

echarts的init方法运行时,会在用户定义的div下自动生成一个div。在生成charts后,还会生成一个canvas标签。
但是还是不能修改div内容,已经改用标签页实现这个需求。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐