vue 多次调用同组件 内部echart只渲染一次

最新推荐文章于 2023-05-17 09:59:37 发布
最新推荐文章于 2023-05-17 09:59:37 发布
阅读量1k 收藏 2
点赞数
分类专栏： Vue Echart 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cmhdl521/article/details/124549224
版权

有一个7天预报的组件，内部是一个echart的曲线图，很多个页面都会调用，第一个页面正常渲染，其他则无效

原始代码

<div class="czwf-col3-main width100 height100" id="forcLineChart2"></div>

myChart7day = echarts.init(document.getElementById("forcLineChart2"));

修改代码

<div class="czwf-col3-main width100 height100" ref="forcLineChart2"></div>

myChart7day = echarts.init(this.$refs.forcLineChart2);

原本使用id注册，id="forcLineChart2"，作用于dom元素上，同一个父页面可以多次调用，vue又是单页面应用，会作用于原来的dom，更换父页面后，则无效，无法渲染。

使用ref则是vue专门针对组件，查找注册信息的，就指向当前组件的实例。

坑了大半天。。。哎

echart 温度计（vue 组件引用）
Quiet_123的博客
12-23 1493
项目需求，既然写了就记录一下。 （因为需要多次使用，所以把echart 封装成单独的一个组件，在父组件中使用。） 这是子组件的代码: 1. 布局（id是echart页面渲染中需要用到的） <div style="background: #f6f6f6"> <div> <div id="main" style="width: 400px; height: 460px"></div> </div> </d
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
我只是个很菜的前端
05-17 1102
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
weixin_52936828的博客
12-03 1864
问题：一个业务场景，就是一个父组件之间多次调用同一个echarts组件，这样就会产生id同样的问题，导致只能渲染一个echarts组件。 解决方案： 之前的echarts初始化 <div id="echarts" /> echarts.init(document.getElementById('echarts')) 改成 <div ref="echarts" /> echarts.init(this.$refs.echarts) 将id获取元素 换成 ref获取元素。
Echarts:父组件中两次调用echarts子组件只渲染一个问题
weixin_38942919的博客
01-06 1628
当echarts图表定义在子组件中，父组件在同一个页面两次调用子组件渲染页面时，只有最后一个子组件被渲染，这是因为在子组件里面是document.getElementById()，而dom里面只有一个id，所以一个id把另一个id覆盖了导致其中一个子组件无法显示。 这时，在子组件中不用id，用ref。 <div class="chartBar" ref="bar"></div> 初始化echarts如下： const chart: any | null = this.$
解决vue一个页面中复用同一个echarts组件的问题
10-15
当在Vue模板中多次使用相同的ECharts组件时，每个组件都会尝试通过相同的id初始化ECharts实例，从而导致了图表无法正常显示的问题。 为了解决这个问题，我们可以为每个ECharts实例创建一个唯一的id。这可以通过在...
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
10-15
主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3方法多次调用组件
最新发布
01-05
### Vue3 中方法多次调用组件的解决方案 在 Vue3 中处理父组件多次调用同一子组件时遇到的问题，特别是当这些子组件具有唯一标识符（如 `id` 属性），可以通过多种方式来优化和解决问题。 #### 使用动态键 (`key`)...
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 622
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
vue指令：v-once 元素和组件只渲染一次，不会随着数据的改变而改变
学亮编程手记
12-19 1507
对容器使用v-once指令进行修饰之后，对数据进行修改，界面不更新 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st
vue一个页面多次使用同一个组件（自己封装的echarts），重复使用只有一个能正常展现的解决方案（亲测有效）
qq_26323419的博客
06-10 5650
大概率是echarts init有问题，是不是用class或id选择器选择元素来init了 错误版本： 正确版本： 装载来源：https://blog.csdn.net/bossjing/article/details/85683247 ...
Vue3 中的 v-once 指令：只渲染一次，提高性能
m0_73311728的博客
05-10 1174
Vue3 中的v-once指令是优化组件性能的一个好工具，它可以帮助我们在需要只渲染一次的静态场景中提高页面性能。但需要根据具体的使用场景来决定是否应用它，否则会对组件正常的数据更新产生影响。在实际开发中，我们可以通过定期使用性能分析工具来检查应用的性能问题，并根据分析结果采取相应的优化措施，从而提高应用的整体性能和用户体验。
解决vue+ Echarts的 resize()方法，在多个echarts图标下window.onresize，只有一个图表自适应生效
weixin_43138882的博客
11-18 2325
1 问题： 在页面上使用echarts有多个图标 resize 缩放只有最后一个有效。 2 解决 改变原来官方写法 1） html里 <div id="container" style="height: 400px;"></div> // 2) methods里 drawLine(){ // 记得在 return里定义好 myChart 字段。 this.myChart = echarts.init(document.getElement
vue中多个echarts图设置resize()方法后只有一个生效 解决方法
weixin_48000450的博客
02-16 1057
在js代码内加入下方代码即可 window.addEventListener(‘resize’, () => { myChart.resize() })
vue封装的echarts组件多次被同一个页面重复调用且自适应(带源码)
m0_49714202的博客
03-03 3004
一.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组件无法自适应图表，resize无效
前端小王子
03-31 3270
在父组件引入多个子组件（里面都是echarts图表）的时候，window.onresize()方法只会对最后一个组件里的图表产生效果，主要原因是组件加载顺序导致的，所以我们将window.onresize监听放到父组件去执行 父组件（图利为vue3写法，可自行换成vue2）： const line = ref(); const bar = ref(); onMounted(() => { setTimeout(function () { // 监听屏幕变化，重置组件图表 wi
关于vue中使用echarts多图(四张图)，导致不能自适应，随着窗口的变化而变化，也就是说resize()无效或者说是只有最后一个生效(v-for遍历只有最后一个生效的解决办法)
qq_32154641的博客
09-19 1734
关于vue中使用echarts多图(四张图)，导致不能自适应，随着窗口的变化而变化，也就是说resize()无效或者说是只有最后一个生效(v-for遍历只有最后一个生效的解决办法)
解决在一个页面多次调用封装echarts组件只有第一个生效的问题
luer_LJS的博客
09-02 4716
最近在写了一个封装echarts的dome时 发现了一些问题。 这是我的echarts <template> <div id="echart"></div> </template> <script> export default { name: 'echart', props: ["option"], mounted(){ let myChart = this.$echarts.init(document.getElemen
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值