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

最新推荐文章于 2024-04-25 15:52:18 发布
最新推荐文章于 2024-04-25 15:52:18 发布
阅读量1.4k 收藏 3
点赞数 1
文章标签： javascript vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomrsun/article/details/121676041
版权

之前使用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后使用图表不显示的问题
AYUAsmart的博客
01-25 3495
文章目录前言一、可能原因一Vue项目未引入echarts二、可能原因二引入版本不对总结 前言 一、可能原因一 Vue项目未引入echarts 引入echarts时必须在你要运行的具体的Vue项目中 比如你的Vue项目名称为demo，那就必须在demo项目里面引入 npm install echarts -S 配置完成后可以查看到echarts对应版本，我的是版本5的 二、可能原因二 引入版本不对 不同版本引入如下： 在 main.js 文件进行全局引用 //版本 4 import echarts .
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts
丑小鸭变黑天鹅的博客
09-08 1523
vue项目中使用element-ui的tab标签页，点击切换的时候，只显示初始加载的echarts，其他tab页面不加载echarts一、问题描述二、 解决办法 一、问题描述 目前在做一个vue项目，遇到这样一个问题。我使用了dialog去设置一个弹框，弹框里添加tab标签页，然后点击不同的tab，显示对应的内容。其中包括echarts的显示。数据或者其他都正常显示，唯独echarts只显示初始化时的。点击其他tab，echarts不显示，于是就上网查了很多资料。先看一看，之前错误的代码，和效果 中间代码
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
echart 页面跳转_解决vue 中 echart 在子组件中只显示一次的问题
weixin_39786155的博客
12-24 253
问题描述一次项目开发过程中，需要做一些图表，用的是百度开源的 echarts。 vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。实际开发中，数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。对vue生命周期不熟悉的，可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解由于父组件请求的数据并不是一成不变的，会根...
echarts作为组件多次引入，只显示一次问题解决
weixin_45898996的博客
02-06 915
echarts作为组件多次引入，只显示一次问题解决，同样适用一个页面多次调用封装echarts组件只有第一个生效的问题
vue父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
changyana的博客
08-04 3010
由于要在页面绘制2个折线图，所以使用了同一个echarts组件，但是在渲染的时候，只能展示出第一个折线图，第二个不显示解决办法
Vue页面多次渲染echarts封装的组件但只出现一个（原因分析，多方案解决，最后附上源码）
weixin_45745641的博客
01-15 5772
前言 最近写项目，写到可视化的部分，有一个水球图的部分我已经封装好了，但是需要在页面多次渲染的时候只能渲染一个水球图，这篇记录一下解决的办法： 对于在页面多次使用封装好的echarts组件均可适用 原因分析 首先我们要知道echart实例的创建方式 通过获取div的id从而初始化echarts的实例，所以进行渲染时，两个div的id相同从而导致只能渲染出来一个图形 <div id="liquidFill" style="width:100%; height: 300px;"></div&g
vue+echarts完整显示x轴的示例以及完整案例.zip
02-15
`vue+echarts`结合使用时，同样可能遇到此类问题。本示例提供了一个完整的解决方案，包括代码示例和效果对比图，以帮助开发者解决这个问题。 首先，我们来看`x轴显示不全的图片.png`。这个图片展示了X轴上的类别...
vue中echarts图表大小适应窗口大小且不需要刷新案例
10-15
在Vue项目中，当页面布局变化，特别是涉及到宽度变化时，如左侧导航菜单的展开与收缩，可能会导致使用echarts图表大小不适应新的窗口尺寸，使得图表显示不全或失真。这通常需要图表能够响应窗口大小的变化，进行...
在vue中实现清除echarts上次保留的数据(亲测有效)
11-19
2. **数据更新的时机**：在数据更新时，如果直接赋新值，可能会导致echarts保留上一次的数据。尤其是在多次点击数据请求按钮时，echarts会多次渲染，这时清除旧数据就显得尤为重要。 3. **清除echarts数据的方法**...
echarts重复加载解决办法
03-01
解决用百度echarts日历添加点击或双击事件后，会出现重复加载情况。
Echarts刷新页面图形会消失
weixin_44640804的博客
11-18 1837
Echartss刷新页面图形会消失
解决vue3集成echarts数据刷新后图表不刷新问题
三劫散仙
08-08 3579
解决vue3集成echarts数据刷新后图表不刷新问题
Echarts中刷新页面图形会消失问题
泊耳的笔记本
12-16 4728
问题： 将echarts图形写在子组件，通过父组件向子组件传递数据，但是有时候刷新页面会不显示。 这是由于向子组件传递的数据没有实时进行监听更新导致。 解决：利用vue中的watch对父组件传递过来的数据进行实时监听。 props: { workplace_province: { type: Array, default: () => [], }, watch: { workplace_province: function (val) {
vue3，echarts图表刷新空白，或者说父组件代码改动图表就空白问题
2302_76925238的博客
04-25 1043
两种解决方案①用ref代替id引入图表容器-这里我是父组件获取传过来的。解决方案还是用id引入，②用定时器延迟一下保证数据拿到了再应用注册图表。
解决ECharts图表不能重复渲染问题
爱蹦哒的咸鱼的博客
04-12 572
图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签。
解决echarts图表页面切换不显示，刷新后显示的问题
weixin_45713650的博客
01-24 1974
最近在做大屏开发时，图表只有第一次正常显示，每次修改代码，或者切换页面再切回来，图表都不显示，需要重新刷新才可以显示。通过查阅资料，好像使用动态的id也可以实现，在每次重新渲染时id都不同（例如id拼接时间戳）在图表初始化之前，清除掉_echarts_instance_属性。，这种方式我并没有动手尝试，应该也可以解决这个问题。这样，切换页面的时候，也可以正常渲染了~
echarts 出现的各种问题
丫丫不秃头噢---
07-14 940
目录 图表需要刷新才显示???? 双y轴显示???? 提示框样式更改???? 1.图表需要刷新才显示???? 问题表述：第一次进入页面，图表正常显示 。但回到首页之后再次进入此页面，图表不显示且无报错，返回数据也正常，画布也是正常的有绘制？？可是图表没了。需要刷新才会有？？？？ 找了一大圈问题，最后发现： echars在绘制图形的时候会给div添加属性_echarts_instance_，因此只需要将此属性移除并清空div内容即可重新绘制新的echarts图形。 这个解释算懵懂吧（echarts的
vue项目中使用echarts 遇到问题总结
Sophiego的博客
02-01 8965
需要注意echarts版本不同，部分属性可能有所不同，我用的是echarts4.0. 一、echarts图表自适应问题。 自适应代码 (function (doc, win) {     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchan
vue2使用echarts做从上到下树图tree
最新发布
10-09
// 初始化图表时也更新一次 }, updateOptions() { // 根据 data 更新图表配置，这里假设 data 是树状结构的对象数组 const treeData = ...; // 你的树形数据格式 this.setOption({ series: [ { type: 'tree...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值