vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题

最新推荐文章于 2024-03-28 22:07:45 发布
最新推荐文章于 2024-03-28 22:07:45 发布
阅读量2.9k 收藏 7
点赞数 4
分类专栏： 前端 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changyana/article/details/126157061
版权

由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示，如图
在这里插入图片描述
最后发现我是通过id绑定的组件进行初始化，那么2个折线图就会使用同一个id，导致页面只渲染一个id，
在这里插入图片描述

正确的做法应该绑定ref进行初始化
正确代码如下：

  <div ref="LineChart" style="width: 100%; height: 25rem"></div>

使用this.$refs.LineChart进行获取

this.chart = echarts.init(this.$refs.LineChart)

展示结果正确！
在这里插入图片描述

ChangYan.
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
使用Vue开发动态刷新Echarts组件的教程详解
11-27
本教程将引导你从零开始，使用Vue.js封装一个动态渲染数据的Echarts折线图组件。 ### 一、项目结构搭建 首先，确保你已安装Node.js环境，然后全局安装Vue CLI： ```bash npm install -g @vue/cli ``` 接下来，...
Vue页面多次渲染echarts封装的组件但只出现一个（原因分析，多方案解决，最后附上源码）
weixin_45745641的博客
01-15 5655
前言 最近写项目，写到可视化的部分，有一个水球图的部分我已经封装好了，但是需要在页面多次渲染的时候只能渲染一个水球图，这篇记录一下解决的办法： 对于在页面多次使用封装好的echarts组件均可适用 原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 <div id="liquidFill" style="width:100%; height: 300px;"></div&g
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
我只是个很菜的前端
05-17 836
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
vue 多次调用同组件 内部echart只渲染一次
陈熙之的博客
05-06 1021
有一个7天预报的组件，内部是一个echart的曲线图，很多个页面都会调用，第一个页面正常渲染，其他则无效 原始代码 <div class="czwf-col3-main width100 height100" id="forcLineChart2"></div> myChart7day = echarts.init(document.getElementById("forcLineChart2")); 修改代码 <div class="czwf-col3-m
解决vue一个页面中复用同一个echarts组件的问题
10-15
ECharts是一个强大的图表库，当它被封装为Vue组件时，可能会遇到无法在同一个页面上复用同一组件的问题。本知识点将详细解释在Vue中复用ECharts组件时遇到的问题及解决方案。 首先，要解决在Vue页面中复用同一...
Vue-ECharts 是 ECharts 的 Vue.js 组件-javascript
06-21
2. **基本使用**：在Vue组件的模板中，你可以像使用其他组件一样使用`v-echarts`指令，将其绑定到一个包含ECharts配置的对象上。例如： ```html <v-echarts :options="chartOptions" ref="chart"></v-echarts> ``...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
在Vue.js应用中，使用ECharts进行数据可视化时，可能会遇到一个问题：当用户多次请求数据并更新图表时，ECharts可能会保留之前的数据显示，导致新数据无法正常渲染。为了解决这个问题，我们需要找到一种方法来清除...
Echarts:父组件中两次调用echarts子组件只渲染一个问题
weixin_38942919的博客
01-06 1494
当echarts图表定义在子组件中，父组件在同一个页面两次调用子组件渲染页面时，只有最后一个子组件被渲染，这是因为在子组件里面是document.getElementById()，而dom里面只有一个id，所以一个id把另一个id覆盖了导致其中一个子组件无法显示。 这时，在子组件中不用id，用ref。 <div class="chartBar" ref="bar"></div> 初始化echarts如下： const chart: any | null = this.$
关于多个Echarts在页面只显示一个的问题
m0_73267676的博客
03-13 1560
多个Echarts在页面只显示一个的问题,代码问题出在获取id这里 ,因为组件注册到页面显示，三个id都是一样的就会冲突只获取第一个的dom元素 把id改成不同或者改ref获取就行了
关于在vue项目当中引入多个子组件时候只显示一个组件的问题
qq_41304029的博客
01-08 1018
少了留言区组件没有展示出来，本来我以为是组件写的有问题，然后将列表组件复制几遍时候一样只是展示第一个组件。这个是在html文件当中编写的，不是.vue组件当中编写，然后修改为双标签的才好了。经过查阅资料，才知道。
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 865
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 524
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
Vue中v-for多个Echarts图表组件只渲染一个要素问题排查
最新发布
极限突破者的博客
03-28 2084
基础问题，解决Echarts V-for渲染问题，多记录，建立起自己开发的节奏感
vue使用echarts只显示一次的问题
tomrsun的博客
12-02 1458
之前使用vue2+webpack其实没有出现问题，但是新项目采用vue3+vite2后，使用了之前echarts绘图的一个vue组件，因为是用v-if控制的显示影藏，线下是没有问题的，打包部署后于是就出现了点击显示，只显示第一次，关闭再点击就不在显示绘制的canvas，程序不报错，而且canvas其实也加载了 这样写就不行了，一直想不到问题，直到我尝试使用v-show也不行，原来里面还要写v-show 之前把绘制放在了mounted里面，现在就需要监听父组件的控制显示隐藏的变量，把绘制的canvas方
Vue多页面使用同一个echarts，只会出现一个
qq_43086723的博客
07-05 1483
首先echarts的创建方式，是通过获取元素的id初始化echarts实例，所以在渲染时，两个元素的id相同只会出现一个echarts图表 解决办法 1、通过vue的ref去获取元素 使用ref我们就不需要获取DOM结点了。$ref如果注册在元素上，它指向的就是DOM元素，如果注册在组件上，他指向的就是组件的实例。因为两个相同的id所以会覆盖，故我们设置不同的id即可。 关于id的设置，我们可以使用父组件传过来的不同的值，也可以写个不重复的随机数进行赋值，主要是能保证两个组件id不同就行 通过以上两种方法
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
sx_lidan的博客
08-27 9452
近期项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后都对所有图表进行了初始化和绘制，然而在tab切换中出现了如下动图中的问题： 说明：图中可以看到，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。 我的解决方法是：设置被选中监听函数，在第二个tab被选中时初始化图表： $(".js-flow-unit").on("click",...
vue 多个组件使用同一个ref
wang___haha的博客
09-26 1961
找到项目中用到的vue.js文件，\node_modules\vue\package.json文件中的module属性为默认引入的vue.js文件。打开改文件，搜索$refs，找到此处代码。
vue封装echarts饼图组件
08-24
Vue封装echarts饼图组件可以参考以下内容。 首先，需要引入echarts组件的使用参考，可以参考这篇博客文章来学习如何使用echarts组件进行饼图的封装。 其次，在Vue的页面中使用<chart>标签来放置echarts饼图组件。在data()方法中定义extraOption和seriesData，这两个参数用来配置echarts饼图的选项和数据。在echarts组件的初始化中，需要将extraOption和seriesData赋值为原始的配置选项和系列数据。 在js文件的default_option中，可以定义一些基本的配置内容，如标题、图例、提示框、坐标轴等。 最后，导出这些配置项供饼图组件使用。通过以上的步骤，就可以对Vue进行echarts饼图组件的封装了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue实现 【echarts中 “9种” Pie饼图图例】的组件封装及调用](https://blog.csdn.net/weixin_50450473/article/details/122424201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中使用echarts进行封装使用，提高开发效率](https://blog.csdn.net/weixin_46002223/article/details/131274952)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值