vue3解决一个页面不能多次出现同一个echarts

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量269 收藏 1
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canRun_/article/details/132626890
版权

有时候我们页面需要展示两次同一个echarts 像下面的效果一样.

我们把代码又粘了一份 发现 这样行不通的 有一个数据或者两个数据是展示不出来的 

这是什么原因呢???

原因是我们用了id选择器 同一个页面只能使用一个id.

这时候我们可以想到另外一个东西ref.

使用ref获取元素节点的好处是可以直接在Vue实例中获取元素节点，而且即使元素发生变化，也能够获取到最新的元素；

我直接把id改成ref就可以了.

canRun_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程
高级前端工程师
02-21 5705
解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中
echarts第一次出现图表，后续不出现图表
imagezx的博客
12-20 257
通过查资料和调试发现了问题，对于echarts来说，当渲染图表时会生成一个 _echarts_instance_的一个初始化id,倘若第一次生成的图表id为1，第二次也为1，则不会重新渲染图表，只有两次的id不一样才会重新渲染。通过调试发现，本地上的ecId每次都不一样，服务器上的ecId,当我重新访问这个页面ecId还是原来的，我猜测是操作系统的差异或者是其他原因导致代码认为 重新进入页面的这个图表还是原来的不用重新渲染。解决这个问题只需要在初始化图表之前 移除这个属性。
vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析
m0_63229791的博客
04-10 582
因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。 所以想出来以下解决方
关于vue一个页面中复用同一个echarts组件的问题
耿彦丰的博客
09-26 4635
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChar...
vue,echarts同一div连续使用两次同一组件
qq_41944263的博客
07-01 383
父组件： <div class="Vcircles"> <Progresscir :tabledata="yhzgl" :id="123" :title='"隐患整改率"'> </Progresscir> <Progresscir :tabledata="wdgcysl" :id="456"
vue中封装Echart组件被同一个页面多次调用，数据被覆盖问题解决办法-ref
JackieDYH的博客
09-01 2214
大概率是echarts init有问题，是不是用class或id选择器选择元素来init了,改用ref即可 多次调用数据会发生覆盖 <divid="cate"></div> this.cake = echarts.init(document.getElementById("cate")); 正确封装 <divid="cate"ref="ref_cate"></div> this.cate=this.$echarts.init...
在Vue 中实现循环渲染多个相同echarts图表
12-28
在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。 上图效果实现代码： (item,index) key=index> ...
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
实现一个Vue页面多次复用一个echarts组件的数据传递（setup语法糖写法)
m0_74069684的博客
06-07 920
注：id的传递的传递是为了防止由于id相同导致第二个echarts图覆盖第一个echarts图。还是那句话，能看懂代码的伙伴，直接把代码拿走修改即可，稍有疑问的伙伴，就来听我解释一下吧。由于想要实现组件的复用的功能，从而产生了两个问题，第一个是数据的传递，第二个是id的传递。接着 ，通过defineprops接收传递过来的数据和id，并且创建一个实例。然后通过动态数据绑定，以及绑定一个id，传递给子组件。最后，将props接收到的值给对应的属性。
Vue3 组件内使用echarts时出现重复挂载的问题
zb527129的博客
07-23 1556
在Vue3中遇到Echarts出现 a chart instance already initialized on the dom.的错误，解决的方案是在初始化之前先销毁chart对象就可以了。
在vue中使用echart,以及踩坑点
guodanpidashu的博客
12-27 1629
在vue中使用echart,以及踩坑点
解决Vue3+echarts5页面卡顿问题
weixin_58042855的博客
10-22 736
在使用Vue3+echarts开发可视化界面时，发现开发完之后页面特别卡顿。看了一些资料发现原因可能在于页面多次渲染。
vue3同一页面多次渲染挂着同一组件出错问题
LinMin的博客
03-01 891
vue3
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 202
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 330
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 748
Web前端三大主流框架介绍：Angular、React、Vue
vue一个页面中复用同一个echarts组件
08-31
在Vue中，可以通过自定义组件的方式来实现在同一个页面中复用同一个echarts组件。 ...通过这种方式，我们可以在同一个页面中多次使用EchartsComponent组件，从而实现复用同一个echarts组件的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值