datav和echarts一起使用时，在datav的组件里获取不到dom元素，导致无法渲染echarts

香蕉麻花皮

已于 2023-10-13 09:28:39 修改

阅读量2.5w

点赞数 7

文章标签： echarts 前端 javascript

于 2023-06-27 11:15:03 首次发布

本文链接：https://blog.csdn.net/m0_58002043/article/details/131413151

版权

最近用datav框架开发一个数据大屏，碰到了一个小问题，也怪我，想着省事了，懒得封装了，结果导致一直在datav组件里获取不到dom元素，导致echarts渲染不上去,代码如下

<template>
  <div>
    <dv-full-screen-container  >
      <div ref="oil_meter" style="height: 520px; width: 520px"></div>
      <dv-border-box-1><acctk></acctk></dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

乍一看没啥问题，但是，我们的在datav的组件里用了div，并且直接获取这个div的dom用来渲染echarts了，这就导致一直报错，报获取不到dom，用来很多种方法，（除了用定时器，给获取dom的代码延迟，这样才能获取到，但是，不到万不得已，不能用定时器，否则，代码档次直接降低）最后，在查看官方文档时，发现了官方的一个告示

不能在父组件里，获取dom！！！，只能是，在子组件中将我们的echarts内容写好，然后在我们子组件里将dom获取到，在组件内操作，然后在将子组件放在父组件里，在父组件中写我们的datav组件边框，在子组件中使用echarts和操作echarts，这样就不会出现在datav组件里写渲染echarts无法获取到dom的问题了.