echarts图表与其他内容切换后无法重新刷新问题

最新推荐文章于 2024-03-26 14:10:04 发布
转载 最新推荐文章于 2024-03-26 14:10:04 发布 · 3.9k 阅读 · 2

本文深入探讨了ECharts图表在特定条件下无法刷新的原因，尤其是在修改了div容器内部结构后的问题。解析了ECharts的渲染逻辑，并提供了解决方案，通过清除div的_echarts_instance_属性值，使图表能够重新渲染。

在特殊情况下,我们可能是用echarts实例并且setOption()但无法刷新表格内容,例如:我们修改了div容器的内部标签等等...

原因可能是我们破坏了第一次渲染的div容器的结构,

echarts的渲染逻辑是这样的:
 如果未实例化则进行实例化过程,在此期间会在div容器生成一个 _echarts_instance_ 属性, 该属性值其实就是当前echarts的ID,然后进行后边的渲染操作...

当我们刷新已经实例化的echarts图表时,echarts会先匹配改div容器上的_echarts_instance_属性值是否与实例对象的ID一样,如果一样则会在原有的结构上进行渲染,但是因为我破坏了原有的结构,所以无法重新渲染出表格内容,所以我们可以执行如下代码:

document.getElementById('div的ID').setAttribute('_echarts_instance_', '')

这样div的_echarts_instance_值就不会被匹配到,这样echarts就会像渲染新的图标一样渲染出来

 

注:这样的操作会重新渲染echarts的div容器结构,也就是重新操作了dom,会影响性能

vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程
高级前端工程师
02-21 7383
解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中
Vue使用Echarts图表切换页面返回后次渲染图表不显示的问题及解决方法
BkjqAws的博客
09-18 1673
在Vue应用中使用Echarts图表时，有时会遇到一个问题：当切换页面后再返回时，图表可能无法正确渲染和显示。在Vue应用中使用Echarts图表切换页面返回后次渲染图表不显示的问题可以通过手动触发图表的重新渲染来解决。我们可以在Vue组件的updated钩子函数中重新绘制图表，以确保图表在页面返回时能正确地显示。这意味着当我们从一个页面切换到另一个页面，然后再返回时，原来的图表实例仍然存在，但它并没有被正确地渲染和显示。为了解决这个问题，我们可以在Vue组件的生命周期钩子函数中，手动触发图表的重新渲染。
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。 补充知识：vue echarts line动态刷新数据组件 我就废话不多说了，大家还是直接看代码吧~ <template> <div class=
解决echarts 无法重新刷新的问题
weixin_33742618的博客
03-21 4955
2019独角兽企业重金招聘Python工程师标准>>> ...
echarts主题切换时页面不刷新问题
u013141712的专栏
09-05 758
解决办法，在重新渲染之前，先给他清空在渲染。
echarts绘制图表，切换页面后返回，无刷新数据图表不显示问题
pacholy的博客
08-05 3662
使用echarts图表时，会出现首次加载不出来，或者切换页面后，需要强刷新才能出来的问题；这个bug我在本地没有，发布线上才有，所以找到了以下解决方案： 在初始化init之前，使用下方代码即可 document.getElementById("myChart1").removeAttribute('_echarts_instance_'); ...
vue tab切换，echarts组件不刷新
weixin_46943039的博客
01-27 2096
tab切换时，echarts组件不更新，设置key强制更新
基于Echarts图表在div动态切换时不显示的解决方式
10-15
然而，在实际操作中，可能会遇到一个问题，即当Echarts图表所在的div元素在动态切换时，图表可能无法正常显示。本文将详细解析这个问题，并提供解决方案。 首先，问题出现在使用Vue等前端框架时，通过事件（如`...
Echarts地图与图表联动
10-20
在`onRegionClick`事件处理函数中，我们将获取到的州标识与人口数据相结合，调用ECharts的`setOption`方法更新饼图的配置，实现图表的动态刷新。这一步需要确保数据格式与饼图的配置项相匹配，以便ECharts能正确解析...
前端tab页切换局部刷新渲染echarts图表
tsw529的博客
12-16 1815
近期项目中有好多个模块有tab页切换渲染echarts图,所以整理了一下,方便以后查看.关键的是html部分的id要和后台返回的数据中的对象frontProjectData中的键名保持一致. 大神们还有其他好的方法欢迎留言,互相学习! 直接上代码: 1.html部分 <div class="outsideBox"> <div class="titleBox">&...
echarts 动态数据改变时, 原数据依然存在图表上，没有刷新
weixin_30414155的博客
05-13 6520
多次调用时option选项默认是合并（merge）的，加上true表示不合并配置 myChart.setOption(option,true); // 加上true表示不合并配置 原图： 加上true后： 转载于:https://www.cnblogs.com/listen9436/p/10857920.html...
echarts切换飞线图未清空_解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)...
weixin_39644377的博客
12-22 743
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新；2.解决办法：数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过)，后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLi...
echarts点击切换map地图时，显示切换成功了，但页面上的信息不变。echarts点击事件触发多次
xioxi
10-12 657
echarts点击切换map地图时，显示切换成功了，但页面上的信息不变。echarts点击事件触发多次
echars绘制图表，切换页面后返回，无刷新数据图表不显示问题；
onlylele的博客
01-11 1684
使用echars图表时，layui框架中，切换页面时，在火狐浏览器图表不显示问题情况； 图表效果如下： 代码如下： 1、html: <div id="cumstorZ" style="height:360px;width: 100%;min-width: 996px;"></div> 2、Javascript： //调用 ...
echarts在数据改变后，折线图并没有全部刷新
weixin_43992788的博客
02-26 1422
echarts在数据改变后，折线图并没有全部刷新 在做一个BI项目的时候，图表需要区分国内和国外显示。当前用户所属企业具备国内外权限的时候，展示两条图表，当查看其他企业需要根据选中的企业所具备的权限改变图表。即刚开始显示两条折线图，更改选择条件并重新setOption后想要隐藏其中一条数据，发现并不能隐藏，该隐藏的这边并没有改变。后台打印console.log(data)后经确认的确只有一条数据的值，说明值得到了改变但是图表没有更新。 经查阅官方文档发现重新set的时候应该加上一个配置项：this.char
vue echarts 记录一个带tab切换的echarts页面 切换的时候如果有一个tab里的echarts没有数据 该如何清空echarts图的数据的问题
qq_27806371的博客
03-26 405
const container = document.getElementById('echartsData'); // 获取容器元素 if (this.chartdom) { this.chartdom.dispose(); // 清空之前的实例（如果需要） } this.chartdom = echarts.init(container); // 初始化echarts实例
解决Echarts 散点图更新数据图表刷新不完全问题
kis_wuyan的博客
09-13 751
前言： 项目中要用到散点图，引入后更新数据发现，散点图的每个点并不会完全刷新，会有旧数据保留 解决办法： this.thisChart = echarts.init('你的图表元素'); this.thisChart.clear(); 解决~
当使用同一echarts组件时切换导航栏数据发生变化但图仍然存在
Tonghanhan的博客
04-03 746
在tabs导航栏进行切换时，随着条件的不同，echarts渲染的数据也有所不同，而此时会出现echats图例中只存在两个元素，而在图形柱状图内却出现了三条柱状图，这明显是对应不上的。如下图所示：1.此时图例上只存在两个，说明echarts图形内只存在男，女两种信息2.当切换导航栏信息再切换到此界面时，此时的图例仍然为男女而柱形图却多了一条多了一条橙色的数据，而此时后端返回的数据是正确的。
echarts 切换时出现上一次图形残留。
japlus的博客
01-05 1898
先说结果：悬浮高亮导致。这可能使echarts的bug。正常情况出现这种问题，一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。但是我这里始终配置notMerge: true，但仍然出现这种问题。最后发现与鼠标悬浮有关。
切换页面后echarts图表横坐标没了
最新发布
12-26
当你切换页面后，ECharts图表可能会丢失横坐标轴显示，这通常是因为在页面跳转过程中，charts实例并没有被正确地保存和恢复。ECharts本身并不支持直接跨页面的数据保留，如果图表依赖于页面的局部数据，你需要采取以下步骤来解决这个问题： 1. **保存图表状态**：在每次页面刷新前，确保将当前图表的状态（包括数据、配置等）存储起来，例如可以将它们放在`window.localStorage`或者对应的前端状态管理库（如Redux、VueX）中。 ```javascript // 假设chartInstance是你ECharts的实例 const state = { chartData: chartInstance.getData(), chartConfig: chartInstance.getOption() }; localStorage.setItem('chartState', JSON.stringify(state)); ``` 2. **加载和初始化图表**：在新的页面或重新加载时，从本地存储中获取之前保存的状态，并基于此重建图表。 ```javascript const storedState = JSON.parse(localStorage.getItem('chartState')); if (storedState) { const chartData = storedState.chartData; const chartConfig = storedState.chartConfig; // 初始化图表并传入数据和配置 const newChartInstance = echarts.init(document.getElementById('your-chart-id')); newChartInstance.setOption(chartConfig); newChartInstance.setData(chartData); } ``` 3. **处理刷新或销毁后再创建**：如果你的应用程序需要处理刷新、关闭或页面卸载的情况，记得在适当的时候清除图表实例，以避免内存泄漏。 记住，这个解决方案仅适用于不需要实时更新数据的场景。对于需要实时更新的图表，可能需要服务器端的帮助或者使用持久化的数据源来同步数据。同时，注意检查是否有其他JavaScript冲突导致的问题，比如DOM元素的移除影响到了图表渲染。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值