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

最新推荐文章于 2024-04-11 15:46:42 发布
最新推荐文章于 2024-04-11 15:46:42 发布
阅读量347 收藏 1
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/canRun_/article/details/132626890
版权
文章讲述了在Vue项目中，由于id选择器限制，同一页面上多次使用ECharts图表可能导致数据展示问题。作者建议使用ref代替id，因为ref可以获取并保持元素节点，确保图表在动态变化时仍能正确显示。
摘要由CSDN通过智能技术生成

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

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

这是什么原因呢???

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

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

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

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

canRun_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue页面多次渲染echarts封装的组件但只出现一个
mynameisjinxiaokai的博客
06-14 583
原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 解决方案 上面已经得出了 因为id相同导致渲染不出来的 原因，所以经过验证有目前我想出了方案：1.切换为ref获取元素 dom只有一个id，所以会出现覆盖的情况。我们需要把id改为通过ref获取到组件 使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。...
vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)
m0_49714202的博客
03-03 2865
一.echarts组件封装调用父组件源码homeBase.vue子组件源码BasicLine.vue 1.单个组件封装调用，用下面这个 var myChart = echarts.init(document.getElementById("main_basicLine")); 2.多个组件封装调用，用下面这个 var myChart = echarts.init(this.$refs.echarts); this.$nextTick(() => { myChart.resiz
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。 所以想出来以下解决方
在vue中一个页面内重复调用同一个echarts组件(桑基图5.0+)，减少冗余文件
最新发布
Shi_haoliu的博客
04-11 233
众所周知，如果id重复的话 echarts调用会只渲染一个，所以就需要用父组件传参进入，多穿穿参就能少写几个重复的 屏幕发生变化后resize（），占满整个div
vue如何循环同一个echarts图表
weixin_30532987的博客
08-06 5150
　因为我们知道echarts图表需要一个ID节点，所以我们循环echarts同一个图表时要考虑ID节点变化问题。废话不多说，直接上demo效果。 这里有一位分析师在不同的模拟组合，这时需求要在dialog弹出层要展示两个模拟组合信息，而且数据用echarts显示出来。效果如下： 代码实现： html代码部分： <div v-if="item.name==dialogD...
Vue 中循环渲染多个相同 echarts 图表
明天也要努力的博客
05-09 8983
在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。 上图效果实现代码： <template> <div class="projectCost"> <div class="container"> <div class="wrapper" v-for="(item,index) in list" :key="index"> <
关于vue一个页面中复用同一个echarts组件的问题
m0_61890246的博客
10-26 3597
关于vue一个页面中复用同一个echarts组件的问题
vue使用echarts——一个页面多个echarts
wang1811539550的博客
08-18 1379
直接用id获取元素是获取不到的，必须在onMounted生命周期内获取，但是用这种方法切换路由再返回后会警告dom已经初始化echarts，需要用vue获取dom元素的方法ref，但是初始化还是要放在onMounted生命周期内。
vue3同个页面，多次加载wangeditor富文本编辑器实例
zhuwoqing的专栏
11-06 1480
vue3同个页面，多次加载wangeditor富文本编辑器实例。并消除编辑器之间的互相干扰
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟...
vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析
m0_63229791的博客
04-10 800
因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。
vue,echarts同一div连续使用两次同一组件
qq_41944263的博客
07-01 398
父组件： <div class="Vcircles"> <Progresscir :tabledata="yhzgl" :id="123" :title='"隐患整改率"'> </Progresscir> <Progresscir :tabledata="wdgcysl" :id="456"
vue3封装echarts组件，单个页面重复引用无法正确显示问题
weixin_49729524的博客
09-22 241
vue3 同一个页面多次使用图表
vue中封装Echart组件被同一个页面多次调用，数据被覆盖问题解决办法-ref
JackieDYH的博客
09-01 2247
大概率是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组件的数据传递（setup语法糖写法)
m0_74069684的博客
06-07 985
注：id的传递的传递是为了防止由于id相同导致第二个echarts图覆盖第一个echarts图。还是那句话，能看懂代码的伙伴，直接把代码拿走修改即可，稍有疑问的伙伴，就来听我解释一下吧。由于想要实现组件的复用的功能，从而产生了两个问题，第一个是数据的传递，第二个是id的传递。接着 ，通过defineprops接收传递过来的数据和id，并且创建一个实例。然后通过动态数据绑定，以及绑定一个id，传递给子组件。最后，将props接收到的值给对应的属性。
解决vue⼀个页面中复用同⼀个echarts组件的问题
qq_52337177的博客
06-15 1091
解决vue⼀个页面中复用同⼀个echarts组件的问题
vue3使用Echarts封装多个相同的组件简单版
m0_71683629的博客
10-16 467
采用父子组件搭配，子组件封装Echarts图表,父组件负责调用。这里暂时没有使用父子传参，以下为传参方法。如有不合理的地方,欢迎指正。
vue一个页面中复用同一个echarts组件
08-31
在Vue中，可以通过自定义组件的方式来实现在同一个页面中复用同一个echarts组件。 首先，我们需要创建一个echarts组件。可以使用Vue的单文件组件(.vue)来定义组件，例如创建一个名为EchartsComponent.vue的文件。 在EchartsComponent.vue文件中，我们可以使用echarts的官方库或者其他echarts的封装库来引入echarts，并在组件中渲染echarts图表。 代码示例（EchartsComponent.vue）： ``` <template> <div> <div ref="chart" style="width: 400px; height: 400px;"></div> </div> </template> <script> import echarts from 'echarts'; export default { mounted() { this.renderChart(); }, methods: { renderChart() { // 使用echarts库的API来渲染echarts图表 const chart = echarts.init(this.$refs.chart); // 图表配置 const options = { // ... }; // 渲染图表 chart.setOption(options); } } }; </script> ``` 接下来，在需要使用echarts图表的页面中，我们可以通过引入EchartsComponent.vue组件来复用echarts组件。 代码示例（App.vue）： ``` <template> <div> <!-- 第一次使用echarts组件 --> <echarts-component></echarts-component> <!-- 第二次使用echarts组件 --> <echarts-component></echarts-component> </div> </template> <script> import EchartsComponent from './EchartsComponent.vue'; export default { components: { EchartsComponent } }; </script> ``` 在App.vue中，我们通过`<echarts-component></echarts-component>`的方式引入EchartsComponent组件，从而实现在同一个页面中复用同一个echarts组件。 当页面渲染时，EchartsComponent组件会根据自身的`mounted()`方法中的代码来初始化echarts图表并渲染到页面中。 通过这种方式，我们可以在同一个页面中多次使用EchartsComponent组件，从而实现复用同一个echarts组件的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值