关于Echarts切换页面不显示问题

最新推荐文章于 2024-06-18 19:45:00 发布
原创 最新推荐文章于 2024-06-18 19:45:00 发布 · 1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#echarts #前端 #javascript
本文介绍了解决ECharts图表在二次加载时出现不显示的问题。通过在初始化ECharts之前清除元素的_echarts_instance_属性，可以有效避免这一现象。此方法适用于页面部署上线后遇到的图表加载问题。

问题: 做了很多echarts图表页面 部署上线后 发现首次进入页面是有图表 第二次进入就不显示

查看结构 发现是由盒子存在的 如图

 在初始化echarts之前清除下该属性即可实现:

const osteotomy_thickness1 = document.getElementById('osteotomy_thickness')
osteotomy_thickness1.removeAttribute("_echarts_instance_")
var osteotomy_thickness = echarts.init(osteotomy_thickness1);

欢迎留言交流~~

vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程
✅ 精选推荐文章
02-21 7596
解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中
路由切换再回来Echart图表消失问题
码刀攻城
12-07 6083
问题描述 使用echarts图表时，首次可以加载出来， 但是 切换到 其他的路由 之后再 切换回来 echarts图表就不显示了， 刷新之后又可以显示出来。 原因分析 首先我们要知道 echarts的渲染逻辑， 如果未实例化 的盒子则进行 实例化,在此期间会在div容器生成一个 _echarts_instance_ 属性， 该属性值就是当前echarts的ID,然后进入后边的渲染操作流程 当 经过 切换路由 在回来时， echarts的ID就回到初始状态， 所以 和 原先的 指定id 的 div 的_
tab切换 echarts图表消失
...
04-03 2387
tab切换 echarts图表消失
解决echarts图表在项目中打包后切换页面后不显示的问题（vue3）
qq_44532387的博客
11-10 1441
在工作中发现一个问题，在项目本地运行环境中echarts图表都显示正常，而打包之后的文件在首次进入页面时正常，切换页面切回便显示空白了，通过上网查询解决方案总结出两种方法。
echarts图表在切换页面/路由跳转后图表消失问题
前端小陈的成长记录
02-27 2125
echarts图表在切换页面/路由跳转后图表消失问题
vue切换页面echarts图表不显示的问题
m0_66523895的博客
09-01 6083
在vue项目中切换tab页面或者在后台管理框架中切换面包屑echarts图表会不显示，初次进入的时候能够正常显示，本地运行也没有问题，这个问题只在线上部署的时候出现。目前找到了两个解决方案，做下记录。echarts挂载的dom元素有一个属性：_echarts_instance_，它应该类似id，需要每次刷新重新生成，所以我们每次挂载前都去除这个属性。将echarts图表挂载的div的id改成动态id，确保切换页面时，echarts图表每次都可以重新挂载。以上两个方案都测试可以解决这个问题。...
echarts绘制图表，切换页面后返回，无刷新数据图表不显示问题
pacholy的博客
08-05 3742
使用echarts图表时，会出现首次加载不出来，或者切换页面后，需要强刷新才能出来的问题；这个bug我在本地没有，发布线上才有，所以找到了以下解决方案： 在初始化init之前，使用下方代码即可 document.getElementById("myChart1").removeAttribute('_echarts_instance_'); ...
vue+echarts项目中切换页面或者刷新宽度改变 图表显示不全的问题
David_zjh的博客
09-03 1186
vue+echarts项目中切换页面或者刷新宽度改变 图表显示不全的问题@TOC 首先npm安装echarts $ npm install echarts --save 在main.js中导入echarts import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 页面引入echarts图表 首先要有一个有id 和固定宽高的盒子 然后data中引入 option 然后再methods初始化图表 然后给select选择
vue项目切换页面echarts不显示的问题
paidaboluo的博客
09-05 2060
vue项目切换页面echarts不显示的问题
解决echarts图表页面切换不显示，刷新后显示的问题
weixin_45713650的博客
01-24 3331
最近在做大屏开发时，图表只有第一次正常显示，每次修改代码，或者切换页面再切回来，图表都不显示，需要重新刷新才可以显示。通过查阅资料，好像使用动态的id也可以实现，在每次重新渲染时id都不同（例如id拼接时间戳）在图表初始化之前，清除掉_echarts_instance_属性。，这种方式我并没有动手尝试，应该也可以解决这个问题。这样，切换页面的时候，也可以正常渲染了~
记录一下vue切换tab页面，Echarts图表不显示的问题
weixin_45426519的博客
01-04 3759
项目场景： 最近学习Vue遇到了一个坑，在点击tab标签切换页面时，echarts会在下一次切换不能显示出来，而且后台数据可以正常传到此页面中 问题描述： <!-- 这是我的标签 --> <el-main style="padding: 0px;"> <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" @tab-click="clickTab"&
处理echarts在vue中切换到其他页面再返回来就不显示的问题
weixin_53545517的博客
10-20 1864
//在setOption之前使用这句话 document.getElementById(‘dashboard’).setAttribute(‘echarts_instance’, ‘’) myChart.setOption(option)
Vue使用Echarts图表切换页面返回后次渲染图表不显示的问题及解决方法
BkjqAws的博客
09-18 1844
在Vue应用中使用Echarts图表时，有时会遇到一个问题：当切换页面后再返回时，图表可能无法正确渲染和显示。在Vue应用中使用Echarts图表切换页面返回后次渲染图表不显示的问题可以通过手动触发图表的重新渲染来解决。我们可以在Vue组件的updated钩子函数中重新绘制图表，以确保图表在页面返回时能正确地显示。这意味着当我们从一个页面切换到另一个页面，然后再返回时，原来的图表实例仍然存在，但它并没有被正确地渲染和显示。为了解决这个问题，我们可以在Vue组件的生命周期钩子函数中，手动触发图表的重新渲染。
Vue 项目使用 ECharts 使用路由或者点击浏览器前进/后退切换页面回来图表不显示
weixin_60886885的博客
06-13 2426
在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了。
谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题
weixin_46328739的博客
06-18 394
【代码】谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题。
echarts绘制图表，切换页面后返回，默认刷新数据图表不显示问题（有用）
weixin_38345306的博客
08-02 1630
echarts绘制图表，切换页面后返回，默认刷新数据图表不显示问题（有用）
vue3 使用 echarts画饼图时 切换页面后饼图不显示问题
qq1103449624的博客
11-29 805
在子组件加上if判断 判断数据是否是自己获取到的。
vue中用v-if/v-show切换echarts不显示
web8_zhy的博客
11-15 6792
vue中用v-if切换echarts不显示 当用v-if切换页面的时候 从第二页返回到第一页的时候,第一页的echarts图不显示 是因为切换回来的时候并没有触发生命周期函数, 所以第一页的图并不能显示 话不多说 直接上图 父组件里有echarts 子组件person里也有echarts // 父组件 当子组件点击返回的时候 触发@goBack事件 // 子组件 // 父组件 如图,用vu...
Vue3使用echarts图形，本地页面切换以及table标签切换正常显示，线上部署页面切换后图形不展示或者展示异常
m0_63223221的博客
10-14 1215
切换页面以及table标签，图形不展示，在onBeforeUnmount钩子函数里将echarts资源进行释放，再次打包部署后，切换标签页或者路由跳转切换页面，图表正常显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值