vue使用echarts只显示一次的问题

最新推荐文章于 2024-04-25 15:52:18 发布
原创 最新推荐文章于 2024-04-25 15:52:18 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #echarts

本文讲述了在从Vue2迁移到Vue3并使用Vite2构建新项目时，遇到ECharts组件显示问题。通过调整组件生命周期管理，将图表绘制移除mounted并监听父组件状态变化，解决了点击后只显示一次的问题。

之前使用vue2+webpack其实没有出现问题，但是新项目采用vue3+vite2后，使用了之前echarts绘图的一个vue组件，因为是用v-if控制的显示影藏，线下是没有问题的，打包部署后于是就出现了点击显示，只显示第一次，关闭再点击就不在显示绘制的canvas，程序不报错，而且canvas其实也加载了
在这里插入图片描述
这样写就不行了，一直想不到问题，直到我尝试使用v-show也不行，原来里面还要写v-show
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/c55a1886539a44ff9d4698d96783ff01.png在这里插入图片描述

之前把绘制放在了mounted里面，现在就需要监听父组件的控制显示隐藏的变量，把绘制的canvas方法放在监听里，删除mounted里绘制的方法，并绑定showWndobs到echarts的盒子上,再次打包部署，问题解决

tomrsun
关注
Vue前端写Echarts：第一次点击图形显示不出来，第二次才显示出来图形？
ylp2023的博客
06-05 1199
准备一个
Vue页面多次渲染echarts封装的组件但只出现一个（原因分析，多方案解决，最后附上源码）
weixin_45745641的博客
01-15 6299
前言 最近写项目，写到可视化的部分，有一个水球图的部分我已经封装好了，但是需要在页面多次渲染的时候只能渲染一个水球图，这篇记录一下解决的办法： 对于在页面多次使用封装好的echarts组件均可适用 原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 <div id="liquidFill" style="width:100%; height: 300px;"></div&g
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 1051
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
echart 页面跳转_解决vue 中 echart 在子组件中只显示一次的问题
weixin_39786155的博客
12-24 304
问题描述一次项目开发过程中，需要做一些图表，用的是百度开源的 echarts。 vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。实际开发中，数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。对vue生命周期不熟悉的，可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解由于父组件请求的数据并不是一成不变的，会根...
vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
changyana的博客
08-04 3092
由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示解决办法
Vue中Echarts组件复用时，因为id唯一而只生效一个的解决办法【已解决】
xla_java的博客
07-24 738
组件，想重复使用echart图表。项目开始使用id进行echart图表初始化，发现多次调用同一个组件出现id重复，导致组件只能使用一次得问题。将id改为ref即可。
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
`vue+echarts`结合使用时，同样可能遇到此类问题。本示例提供了一个完整的解决方案，包括代码示例和效果对比图，以帮助开发者解决这个问题。 首先，我们来看`x轴显示不全的图片.png`。这个图片展示了X轴上的类别...
vue中echarts图表大小适应窗口大小且不需要刷新案例
10-15
在Vue项目中，当页面布局变化，特别是涉及到宽度变化时，如左侧导航菜单的展开与收缩，可能会导致使用echarts图表大小不适应新的窗口尺寸，使得图表显示不全或失真。这通常需要图表能够响应窗口大小的变化，进行...
echarts重复加载解决办法
03-01
解决用百度echarts日历添加点击或双击事件后，会出现重复加载情况。
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts
丑小鸭变黑天鹅的博客
09-08 1674
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts一、问题描述二、 解决办法 一、问题描述 目前在做一个vue项目，遇到这样一个问题。我使用了dialog去设置一个弹框，弹框里添加tab标签页，然后点击不同的tab，显示对应的内容。其中包括echarts的显示。数据或者其他都正常显示，唯独echarts只显示初始化时的。点击其他tab，echarts不显示，于是就上网查了很多资料。先看一看，之前错误的代码，和效果 中间代码
Echarts刷新页面图形会消失
weixin_44640804的博客
11-18 1955
Echartss刷新页面图形会消失
解决vue3集成echarts数据刷新后图表不刷新问题
三劫散仙
08-08 4539
解决vue3集成echarts数据刷新后图表不刷新问题
Echarts中刷新页面图形会消失问题
泊耳的笔记本
12-16 4913
问题： 将echarts图形写在子组件，通过父组件向子组件传递数据，但是有时候刷新页面会不显示。 这是由于向子组件传递的数据没有实时进行监听更新导致。 解决：利用vue中的watch对父组件传递过来的数据进行实时监听。 props: { workplace_province: { type: Array, default: () => [], }, watch: { workplace_province: function (val) {
vue3，echarts图表刷新空白，或者说父组件代码改动图表就空白问题
2302_76925238的博客
04-25 1460
两种解决方案①用ref代替id引入图表容器-这里我是父组件获取传过来的。解决方案还是用id引入，②用定时器延迟一下保证数据拿到了再应用注册图表。
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 673
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
解决echarts图表页面切换不显示，刷新后显示的问题
weixin_45713650的博客
01-24 3163
最近在做大屏开发时，图表只有第一次正常显示，每次修改代码，或者切换页面再切回来，图表都不显示，需要重新刷新才可以显示。通过查阅资料，好像使用动态的id也可以实现，在每次重新渲染时id都不同（例如id拼接时间戳）在图表初始化之前，清除掉_echarts_instance_属性。，这种方式我并没有动手尝试，应该也可以解决这个问题。这样，切换页面的时候，也可以正常渲染了~
echarts 出现的各种问题
丫丫不秃头噢---
07-14 1087
目录 图表需要刷新才显示???? 双y轴显示???? 提示框样式更改???? 1.图表需要刷新才显示???? 问题表述：第一次进入页面，图表正常显示 。但回到首页之后再次进入此页面，图表不显示且无报错，返回数据也正常，画布也是正常的有绘制？？可是图表没了。需要刷新才会有？？？？ 找了一大圈问题，最后发现： echars在绘制图形的时候会给div添加属性_echarts_instance_，因此只需要将此属性移除并清空div内容即可重新绘制新的echarts图形。 这个解释算懵懂吧（echarts的
在vue中echarts图表显示异常
最新发布
06-27
在 Vue 项目中集成 ECharts 图表时，图表显示异常是一个较为常见的问题，通常与 DOM 渲染时机、响应式机制以及 ECharts 实例的管理有关。以下是排查和解决此类问题的几种方法： ### 1. 确保 DOM 已正确渲染 ECharts...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值