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

简介: 记录一个小问题,datav和echarts一起使用时,在datav的组件里获取不到dom元素

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

<template><div><dv-full-screen-container><divref="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的代码延迟,这样才能获取到,但是,不到万不得已,不能用定时器,否则,代码档次直接降低)最后,在查看官方文档时,发现了官方的一个告示

image.png

不能在组件标签内,获取dom!!!,只能时,在组件标签内使用我们写的echarts内容的组件,然后在我们写的组件内将dom获取到,在组件内操作,然后在将组件放在datav的边框组件内,这样就能成功渲染,并且不会出现获取不到dom了.

image.png



三人行,必有我师。

----香蕉麻花皮

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
13 1
|
2月前
|
JavaScript vr&ar
vue3通过ref获取dom元素并修改样式
vue3通过ref获取dom元素并修改样式
127 0
|
3月前
|
JavaScript
当需要频繁地切换DOM元素的显示状态时,应该使用`v-if`还是`v-show`?
当需要频繁地切换DOM元素的显示状态时,应该使用`v-if`还是`v-show`?
29 1
|
23天前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
28天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
26 0
|
5天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
28 1
|
2天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
2天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
2天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)