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

最新推荐文章于 2024-03-26 14:10:04 发布

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

echarts学习专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了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,会影响性能

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

shuoSmallWhite

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Echarts 折线图或者其他图表切换数据时，有残留，Echarts二次查询残留上次数据解决办法

weixin_41346436的博客

12-23

5673

概述：如果首次查询的折线图有8条，二次查询的只有5条，刚开始还以为是后端传错了，结果查看以后，后端数据返回的数据条目是对的，那问题肯定就是前端的了，本以为每次查询清空所赋值的对象或数组，也不行。结果了解以后是Echarts渲染的问题。原因：折线图setOption时，默认对option进行合并，所以即使一次选择一条数据渲染时（除了首次）也会数据重叠显示多条折线解决方案1：根据api上说的，notMerge参数默认为false，设置成true，只要不让它合并数据那么问题就解决了 mychart.se

vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程

高级前端工程师

02-21

7381

解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中

4 条评论您还未登录，请先登录后发表或查看评论

解决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图表在div动态切换时不显示的解决方式

10-15

然而，在实际操作中，可能会遇到一个问题，即当Echarts图表所在的div元素在动态切换时，图表可能无法正常显示。本文将详细解析这个问题，并提供解决方案。首先，问题出现在使用Vue等前端框架时，通过事件（如`...

Vue使用Echarts图表切换页面返回后次渲染图表不显示的问题及解决方法

BkjqAws的博客

09-18

1673

在Vue应用中使用Echarts图表时，有时会遇到一个问题：当切换页面后再返回时，图表可能无法正确渲染和显示。在Vue应用中使用Echarts图表切换页面返回后次渲染图表不显示的问题可以通过手动触发图表的重新渲染来解决。我们可以在Vue组件的updated钩子函数中重新绘制图表，以确保图表在页面返回时能正确地显示。这意味着当我们从一个页面切换到另一个页面，然后再返回时，原来的图表实例仍然存在，但它并没有被正确地渲染和显示。为了解决这个问题，我们可以在Vue组件的生命周期钩子函数中，手动触发图表的重新渲染。

Echarts地图与图表联动

10-20

在`onRegionClick`事件处理函数中，我们将获取到的州标识与人口数据相结合，调用ECharts的`setOption`方法更新饼图的配置，实现图表的动态刷新。这一步需要确保数据格式与饼图的配置项相匹配，以便ECharts能正确解析...

前端tab页切换局部刷新渲染echarts图表

tsw529的博客

12-16

1814

近期项目中有好多个模块有tab页切换渲染echarts图,所以整理了一下,方便以后查看.关键的是html部分的id要和后台返回的数据中的对象frontProjectData中的键名保持一致. 大神们还有其他好的方法欢迎留言,互相学习! 直接上代码: 1.html部分 <div class="outsideBox"> <div class="titleBox">&...

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 动态数据改变时, 原数据依然存在图表上，没有刷新

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图表横坐标没了