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轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
518 1
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
1652 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1644 1
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
652 5
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
250 3
|
JavaScript 前端开发 API
DOM组件如何实现异步更新?
【5月更文挑战第29天】DOM组件如何实现异步更新?
229 2
|
JavaScript
如何使用requestAnimationFrame实现DOM组件的同步更新?
【5月更文挑战第29天】如何使用requestAnimationFrame实现DOM组件的同步更新?
297 1
|
JavaScript 前端开发 API
DOM组件
【5月更文挑战第29天】DOM组件
213 1
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
1329 0
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
225 0