echarts内无法添加html组件

项目场景：

项目中打算在echarts获取的地图底图上添加新的echarts图表。

---

问题描述：

照着上图这样写的话，等网页渲染完成后，在控制台内无法找到id为startInfo的div。

---

原因分析：

可能是echarts对象初始化时，会把所用到的组件下的所有子组件删除，所以才导致找不到嵌套的部分。

this.chart = echarts.init(document.getElementById("map"));

---

解决方案：

在echarts对象渲染完成后，找到组件内的类名或者id名，然后使用js语句创建dom并塞到其中，即可实现echarts的地图对象内嵌套echarts。

this.$nextTick(() => {
        //创建dom
        let div_startInfo = document.createElement('div')
        div_startInfo.id = "startInfo"
        div_startInfo.style.height = "300px"
        div_startInfo.style.width = "300px"
        div_startInfo.style.position = "absolute"
        div_startInfo.style.top = "5% "
        div_startInfo.style.left = "5% "
        div_startInfo.style.zIndex = "999"
        //将创建的dom添加到已有的组件中
        document.getElementsByClassName('mapboxgl-map')[0].appendChild(div_startInfo)
        this.lineChart = echarts.init(document.getElementById('startInfo'))
        this.lineChart.setOption(this.lineOptions)
      });

最后的结果如图所示：