vue 中 echarts报错，获取到了dom元素，图表能显示，控制台还是报错

最新推荐文章于 2024-05-16 11:26:43 发布

周zerlinda

最新推荐文章于 2024-05-16 11:26:43 发布

阅读量293

点赞数

分类专栏：笔记文章标签： vue echarts

本文链接：https://blog.csdn.net/zerlinda0913/article/details/119798711

版权

笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

 <div v-if="grade<3" ref="gradeChart" style="height: 220px;width: 300px;margin:0 auto;">




  mounted() {
      this.$nextTick(() => {
				setTimeout(()=>{
					let map1=this.initEchartMap(this.gjfsx);
					console.log(this.$refs.gradeChart,"ddkiiok")
					},50)
      })

解决方法将v-if改为v-show，控制台就没报错了

 <div v-show="grade<3" ref="gradeChart" style="height: 220px;width: 300px;margin:0 auto;">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

周zerlinda

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

基于Echarts图表在div动态切换时不显示的解决方式

10-15

问题在于，当切换div时，Echarts图表可能不会自动更新其渲染状态，导致图表不显示，控制台报错：“Can't get dom width or height”。这是因为Echarts在渲染图表时需要一个已经显示的DOM元素来获取其尺寸，而动态...

echarts显示DOM已存在解决方法

weixin_50869131的博客

01-31

301

echarts显示DOM已存在解决方法

参与评论您还未登录，请先登录后发表或查看评论

vue项目获取不到元素、数据渲染失效？

change2121的博客

01-12

647

通过F12 获取元素路径，即使用常规操作。

Vue3--ref使用（解决ref无法获取dom元素的问题）

web15285868498的博客

03-06

4260

众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响应式监听。.

vue3中ref获取dom的方式（包含for循环）

xuefeng11111的博客

03-10

7280

如何在Vue3中通过ref获取dom元素，这里说一下我遇到的情况和使用方式情况一：只是单纯的获取某个dom元素这种情况比较简单，直接在js中通过ref定义一个和html中元素上ref相同名字的变量即可例子： <template> <div class="box" ref="boxRef"> box </div> </template> <script lang="ts" setup> import { onMount.

vue使用echarts是，动态获取数据，动态更新图表数据。

最新发布

Lil_hu的博客

05-16

1129

出现这个问题很可能是渲染时间的问题，因为我们把生成图表的时间放在了mounted这个周期上，这时候很可能会出现，我图表挂载了但是我的父容器布局还没加载完，所以图表找到的父容器就会去找到已经渲染好的父容器，很有概率是'爷爷容器'，所以超出了父容器。因为，在使用时，按照vue的生命周期，有时候会出现，图表渲染时，dom节点还没加载出来。在使用echarts时，按照官网的代码复制进来后发现，图表没有加载进来，提示dom节点无效。加入了钩子后又发现，图是有了，但是图表的长度超出了我的父容器。

vue3环境下，三方组件中使用echarts，无法显示问题

weixin_41094290的博客

01-11

910

vue3中，使用了三方组件primevue的侧边栏Sidebar，在其中注册echarts dom节点，无法显示，提示dom不存在。使用原生div，通过document.getElementById('')，将echarts注册其中，发现可以正常显示；await nextTick()后，开始注册echarts dom，使用primevue的sidebar，在其中注册div，则无法获取。三方组件还未渲染该节点，所以找不到echarts要绑定的dom。此时三方组件中的dom才能被找到。

vue3+echarts踩坑小计

瓜皮伦的博客

05-01

320

template > < button @click = "handleClick" > 更换数据 < / button > < div id = "home" ref = "home" > Home < / div > < / template > < script setup lang = "ts" > import {import {id : 1 , name : '衬衫' , xl : 22 , kc : 77 } , {

解决Vue 中使用Echarts 报There is a chart instance already initialized on the dom.的错误

L1515115的博客

09-15

1万+

解决Vue 中使用Echarts 报There is a chart instance already initialized on the dom.的错误问题: 在已经写好的echarts上面改动数据，回到页面发现，整个echarts 都没了！ 控制台报： There is a chart instance already initialized on the dom. 大概意思就是 dom上已经初始化了一个图表实例。然后我也上网搜索的一些答案，基本都是一个人解决，是个人传。大家看如下网上方法

vue项目引入echarts图表,代码异步,获取不到dom元素,控制台报错

qq_52619560的博客

12-08

3277

工作中遇到的小问题,记录一下解决办法。

完美解决vue引用echarts报错TypeError: this.dom.getContext is not a function

u013346160的博客

06-21

6149

这里写自定义目录标题vue引入echarts渲染时用ref取dom会报错，解决方法如下，如果解决的话请点个赞。错误截图 vue引入echarts渲染时用ref取dom会报错，解决方法如下，如果解决的话请点个赞。 let dom = this.$refs.charts[0];//完美解决报错 //或者直接用原生取dom let dom = document.getElementById("#chart"); 错误截图 ...

使用Echarts报错:this.dom.getContext is not a function；

前端开发小白9527

04-20

9226

echarts 报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，document.getElementById('id')；这里我结合vue使用所以用的是$refs ，我印象中使用$refs是可以的，但是当我打印两个对象查看时差异性就可以显现出来，一个是原生的dom对象，另一个却是Vue组件实例对象代码部分: <div class="

ECharts使用中的bug记录及问题解决

a1239361527的博客

10-27

1317

例如：1、图表加载不出来；2、控制台报错或警告；今天就仔细分析一下以上这种情况；

Vue引入echarts报错

05-19

要在Vue中使用echarts，需要在Vue项目中安装echarts和vue-echarts两个npm包。首先，你需要运行以下命令安装这两个npm包： ``` npm install echarts vue-echarts ``` 然后，在Vue组件中引入vue-echarts，并在`mounted`生命周期钩子函数中初始化echarts实例。例如，在你的Vue组件中添加以下代码： ``` <template> <div ref="chart" style="width: 100%; height: 400px;"></div> </template> <script> import echarts from 'echarts' import { VueECharts } from 'vue-echarts' export default { components: { VueECharts, }, mounted() { // 初始化echarts实例 const myChart = echarts.init(this.$refs.chart) // 在这里使用echarts实例进行图表的配置和绘制 myChart.setOption({ // ... }) }, } </script> ``` 注意，使用`this.$refs.chart`获取DOM元素时，需要给`<div>`元素添加`ref`属性，以便在组件中引用该元素。如果在引入echarts时仍然报错，请检查你的webpack配置是否正确。如果你使用的是vue-cli创建的Vue项目，可以尝试在`vue.config.js`文件中添加以下配置： ``` module.exports = { configureWebpack: { externals: { echarts: 'echarts' } } } ``` 这样会将echarts作为外部库引入，避免在项目中重复打包echarts。