使用Vant用ECharts拿不到dom的问题

最新推荐文章于 2025-01-07 14:49:20 发布
最新推荐文章于 2025-01-07 14:49:20 发布
阅读量533 收藏 7
点赞数 11
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_77055885/article/details/135382490
版权
本文介绍了在使用Vant框架时遇到的问题，即如何在Vue应用中正确引入并初始化ECharts以获取DOM元素。解决方案是利用`markRaw`函数来确保echarts实例被正确处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用Vant框架的时候，用ECharts有时候会拿不到dom。

解决办法：

import { markRaw } from 'vue';

const chart = markRaw(echarts.init(document.getElementById('myChart')));
vant + echarts + 微信公众号页面 实现柱状图
m0_74141658的博客
06-13 466
绘画方法执行有个需要注意的地方，因为页面还没有完全加载完成，所以要等页面加载完成后再执行，否则的话会报错（Error: Initialize failed: invalid dom.），导致浪费了很多时间。vue内引入依赖：import * as echarts from 'echarts';添加echarts 依赖：npm install echarts -save。将准备好的dom，初始化echarts实例，然后进行绘画。注：当前的柱状图的高已经实现动态赋值。柱状图的显示设置：op1。
移动端vant的tab标签切换结合echarts图获取不到元素问题解决
SDAW_1的博客
10-11 916
解决方法： 通过tab提供的click事件,点击一次,则初始化一次dom元素,之后再拿数据去画图,这个时候还是要用到nextTick,以保证dom更新完毕后再把数据渲染上去(因为数据在created就已经拿到) <van-tabs @click="onclick()" v-model="active" swipeable color="rgb(41,135,223)" :lazy-render="false" .
echarts 无法获取数据 与无法获取dom 解决方法
m0_71615654的博客
01-17 1267
echarts 无法获取数据 与无法获取dom 解决方法。
echarts 通过dom获取echarts实例，批量监听reset
dicha7140的博客
03-01 1301
重点在于 echarts.getInstanceByDom 这个 API 我的js： // 懒加载优化：滚动节流策略 var __SCROLLTIMER__ = null // 重新设置 echarts 的宽高 var resizeEcharts = () => { $('[_echarts_instance_]').each((i, e...
echarts图表加载显示空白,找不到dom
qq_58307541的博客
07-05 606
2、把 this.lineChart2 = this.$echarts.init(document.getElementById('fundLineChart2'))改成 this.lineChart2 = this.$echarts.init(this.$refs.chart2)1. 通过this.$nexttick(()=>{}) , 试过， 还是不行。数据请求了，图表加载显示空白。
vant tab切换echarts图表获取不到dom已解决
qq_36406553的博客
08-01 865
van tab切换 echarts获取不到dom问题
【微信小程序】快速入门
God_WZH的博客
07-06 1837
微信小程序快速入门 一、准备工作 学习微信小程序需要有一定的HTML、CSS、JavaScript基础 开发软件：微信开发者工具 微信小程序官方文档：Wechat小程序官方开发文档 微信官方组件库：微信官方组件库 组件库：vant-ui（比微信自带的好看一些，使用说明也更丰富） 图标库：阿里巴巴矢量图标库（可以下载一些矢量图标） 小程序管理平台：微信小程序管理平台（以管理小程序版本，查看小程序AppID，配置https和wss，修改小程序头像等） 学习参考视频：黑马微信小程序 （看完前60个就差不多了）
前端实战：Vue3+ElementPlus+ECharts实现后台管理系统
qq_22910257的博客
01-07 1603
本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。
Vue2大屏项目的简要总结（vue、JavaScript、echarts、组件封装）
博客
04-23 7385
主要就是使用vue进行大屏开发使用到的一些知识总结，通过引用组件、下包、封装js，等方法实现
vue3怎么下载依赖例如echarts
最新发布
03-25
需要确保引用标识正确，根据提供的引用内容，可能引用到Vant的安装配置，但用户的问题是关于ECharts，所以引用可能需要调整，但根据用户提供的引用，可能引用[^2]中的Vue应用实例配置作为参考。</think>### 在Vue3...
h5-my-like:vue + vue-router + vuex + axios + mock + vant + openlayers + echarts
03-28
123qwe 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行测试 npm run test 整理和修复文件 npm run lint 运行端到端测试 npm run test:e2e 运行单元测试 npm run test:unit 自定义配置 请参阅。
Dom元素加载，el-dialog中嵌套el-tab，获取不到dom元素，Echart图表获取不到Dom元素问题
evennight的博客
07-24 840
echart图需要初始化挂在在dom中，如果没有dialog弹出层的话，可以直接写在mounted中通过this.$refs.name获取或者document.getElement的各种方法获取，但是一旦和dialog挂钩，name如果常规写在mounted的时候，就会报错，取不到对应元素，方式二：标签绑定方法@opened = "opendDialog”然后在方法中获取对应的的dom元素。这两种原理都是一样的都是在弹出层加载完成后在获取值。因此需要在加载完成弹出层后在取dom的值。
【bug】tab栏中组件切换时，拿不到Dom数据
kakaai77的博客
06-23 488
/ 等待DOM元素加载完立即执行。可以使用this.$nextTick(()=>{
tab页切换时Echarts图未显示
huifeidexiang87的博客
09-08 1870
点击tab切换按钮进到页面时，echarts柱状图并未展示。以为数据有问题，但打印options之后，发属性options已经赋值完毕。于是看页面元素，发现外层div 高度为0px，宽度是100px。如图。 由于我的echarts大小是自适应宽高的，在tab切换前，echarts已经渲染完毕，但页面dom并没有加载完成，所以echarts无法获取自适应宽高。 所以，我就给组件加了个判断，当切换到echarts图所在的tab页时，再加载echarts组件，就不存在dom未加载完成的问...
Echarts获取整个图表点击DOM和单条数据DOM方法
ende151的博客
04-16 1321
Echarts 点击获取整个图表或者单条数据方法
tab切换 echarts图表消失
...
04-03 2151
tab切换 echarts图表消失
vue tab切换时echarts不显示问题解决方案
thankna的博客
05-19 4174
使用vuetifyUI，其他UI也是同理。 一、echarts不显示问题原因： 1.tab的绑定事件onChange还是onClick 2.找不到对应id的Dom 二、解决方案 1.看下面的代码，两个事件应该分别在两个标签里加载。这个是我加debugger硬试出来的。 <v-tabs v-model="tab" align-with-title ..
vant 半圆仪表盘_echart 画出仪表盘 式进度条
weixin_39788382的博客
12-20 803
pc 端仪表盘进度条：可以参考 element-ui中的组件移动端的进度条：可以参考 京东 或者 vant 中的组件但是没有一个可以完全符合自己的项目需求，所以就只能自己做一个：基于 Vue 框架makeEcharet() {var myChart = this.$echarts.init(document.getElementById('myChart'))myChart.resize({wid...
小程序中vant-weapp组件的引入与使用教程
### Vant-weapp组件库的引入和使用方法详解 #### 标题知识点： - **vant-weapp**: 这是一个为微信小程序定制的Vant UI组件库，基于Vant 2.0的规范进行了适配。Vant-weapp旨在提供一系列具有美观视觉效果和高可用性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值