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

最新推荐文章于 2024-04-10 11:03:07 发布

canRun_

最新推荐文章于 2024-04-10 11:03:07 发布

阅读量368

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/canrun_/article/details/132626890

版权

文章讲述了在Vue项目中，由于id选择器限制，同一页面上多次使用ECharts图表可能导致数据展示问题。作者建议使用ref代替id，因为ref可以获取并保持元素节点，确保图表在动态变化时仍能正确显示。

摘要由CSDN通过智能技术生成

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

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

这是什么原因呢???

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

canRun_

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

解决vue一个页面中复用同一个echarts组件的问题

01-19

因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图：我需要这样一个饼图，并且接下来在很多次地方要用到。直接复制官网的代码，再改改数据，需要用的时候直接拿来用。但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。所以想出来以下解决方

Vue页面多次渲染echarts封装的组件但只出现一个

mynameisjinxiaokai的博客

06-14

599

原因分析首先我们要知道echart实例的创建方式通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形解决方案上面已经得出了因为id相同导致渲染不出来的原因，所以经过验证有目前我想出了方案：1.切换为ref获取元素 dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。...

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

关于vue一个页面中复用同一个echarts组件的问题

m0_61890246的博客

10-26

3639

关于vue一个页面中复用同一个echarts组件的问题

vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析

最新发布

m0_63229791的博客

04-10

852

因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。

Vue3 组件内使用echarts时出现重复挂载的问题

zb527129的博客

07-23

1681

在Vue3中遇到Echarts出现 a chart instance already initialized on the dom.的错误，解决的方案是在初始化之前先销毁chart对象就可以了。

在Vue 中实现循环渲染多个相同echarts图表

12-28

在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。上图效果实现代码： (item,index) key=index> ...

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

01-21

1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法：数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟...

解决vue 中 echart 在子组件中只显示一次的问题

10-18

然而，在上述场景下，子组件只在挂载时创建一次ECharts实例，如果数据更新，图表并不会自动刷新。这是因为在Vue中，子组件的重新渲染通常是由数据的更新触发的，而图表的ECharts实例不会自动检测到数据的变化。因此...

vue-seamless-scroll的使用以及实例

freeherotoday的博客

10-22

2万+

vue-seamless-scroll介绍 vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能安装 ***Npm *** npm install vue-seamless-scroll --save 引入组件 import vueSeamlessScroll from 'vue-seamless-scroll' components:

vue3使用vue3-seamless-scroll插件

m0_70547044的博客

08-04

2141

step参数是用来调整滚动速度的，数值越小，滚动速度越小。

Vue第34篇，vue-seamless-scroll插件，使用详细（ vue-seamless-scroll 无缝滚动）

热门推荐

weixin_65793170的博客

03-07

3万+

⭐vue-seamless-scroll是一个基于Vue.js的无缝滚动组件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，基本能满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下，使用详细；1、安装相关依赖；2、全局引入组件；或则局部引入；3、组件使用，配置相关属性；

vue中封装Echart组件被同一个页面多次调用，数据被覆盖问题解决办法-ref

JackieDYH的博客

09-01

2254

大概率是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...

在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件

都随它大小便吧

07-17

8443

有需求需要用到这个大腿们设计的无缝滚动插件（vue3-seamless-scroll），效果不错，记录一下使用过程。本插件不需要全局引用，只需要局部引用到页面中即可，主要有三个步骤，分别是引入、注册、使用。

vue3同一页面多次渲染挂着同一组件出错问题

LinMin的博客

03-01

1051

vue3

vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程

高级前端工程师

02-21

6415

解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中

vue3中使用vue3-seamless-scroll

qq_39047060的博客

07-20

1375

【代码】vue3中使用vue3-seamless-scroll。

vue+vue-seamless-scroll双表格滚动展示，固定头部

CHENC0518的博客

03-27

1493

vue+vue-seamless-scroll双表格滚动展示，固定头部

vue一个页面中复用同一个echarts组件

08-31

在Vue中，可以通过自定义组件的方式来实现在同一个页面中复用同一个echarts组件。 ...通过这种方式，我们可以在同一个页面中多次使用EchartsComponent组件，从而实现复用同一个echarts组件的效果。