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+Flink搭建GitHub实时数据大屏
通过使用Flink、Hologres构建实时数仓,并通过Hologres对接BI分析工具(以DataV为例),实现海量数据实时分析.
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
648 5
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
249 3
|
JavaScript 前端开发 API
DOM组件如何实现异步更新?
【5月更文挑战第29天】DOM组件如何实现异步更新?
221 2
|
JavaScript
如何使用requestAnimationFrame实现DOM组件的同步更新?
【5月更文挑战第29天】如何使用requestAnimationFrame实现DOM组件的同步更新?
287 1
|
JavaScript 前端开发 API
DOM组件
【5月更文挑战第29天】DOM组件
202 1
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
1295 0
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
219 0
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
1720 2
react+datav+echarts实现可视化数据大屏
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!