vue axios轮询更新echarts 页面崩溃问题

最新推荐文章于 2023-08-10 17:30:22 发布
最新推荐文章于 2023-08-10 17:30:22 发布
阅读量947 收藏 1
点赞数 1
分类专栏： echarts 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51072915/article/details/113735224
版权
本文介绍了在Vue.js项目中，使用axios进行数据轮询更新Echarts图表时，由于长时间运行导致页面崩溃的问题。通过观察浏览器Memory发现Echarts实例和数据缓存持续积累。尝试了Echarts提供的清空实例方法效果不明显。最终解决方案是在`mounted`钩子中初始化Echarts，有效避免了页面崩溃。
摘要由CSDN通过智能技术生成

之前做过一个项目测试发现这个问题，就是页面停留3 ，4 个小时之后页面崩溃了
后来观察了浏览器的 Memory 发现echarts 实例还有echarts 数据缓存在不断累积

解决：
刚开始看了echarts 官方api 确实提供了

echarts.clear()

清空当前实例，会移除实例中所有的组件和图表。用了以后发现作用不是很大 还是会崩溃。
那就是实例的问题了 刚开始只是加了个判断

	let myEcharts
	if(!myEcharts){
   
		myEcharts = echarts.init(dom
最低0.47元/天 解锁文章
有点小菜
关注
专栏目录
定时轮播Echarts造成内存泄漏致使浏览器崩溃问题
m0_37568655的博客
03-10 1414
提示：定时轮播Echarts造成内存泄漏致使浏览器崩溃问题 文章目录前言一、原因二、解决办法 前言 一、原因 1、echarts图未彻底删除； 2、setTimeout和setInterval未清除； 3、全局定于变量未清除； 4、侦听器未清除 二、解决办法 在生命周期销毁前注销定时器和echarts 代码如下（示例）： beforeDestroy() { echarts.dispose(this.chartDom); this.chartDom=null;
echart 缓存_echarts 渲染数据 占用内存过高导致页面奔溃
weixin_39568232的博客
03-04 1011
echarts 渲染数据 占用内存过高导致页面奔溃有遇到类似问题的吗代码如下：function getUserLocation(ossUrl) {$.ajax({url: ossUrl,type: "GET",cache: false,dataType: 'json',success: function (result) {console.log(ossUrl);isFirstLoad = 'N'...
解决echarts+定时器 - 造成的浏览器堆内存溢出导致页面崩溃
最新发布
m0_66358328的博客
08-10 1827
最近在写数据可视化，长期跑在大屏上，但是总会遇到浏览器崩溃的问题，最终发现是定时器刷新加载函数，重复创建echarts示例的原因，不清空会一直占内存，导致超出浏览器堆内存页面崩溃，下面是测试可以看到内存一直再增加。解决方法：echarts的销毁函数dispose()
定时器+echarts运行时间太长导致内存溢出页面崩溃
langziangTom的博客
02-27 2830
echarts运行时间太长导致内存溢出页面崩溃
JS定时器setTimeout()或setInterval()+echarts实时调用接口刷新柱形图数据，导致内存泄漏，浏览器卡死，已解决
twj123456321的博客
08-15 5642
如题，用setTimeout()定时器和echarts编写一个实时跳动的柱形图。页面运行时间较长，浏览器卡死，引起了我的重视，将计时器时间调短，没多久浏览器内存就飙升。开始怀疑是计时器问题，因为之前用的是setInterval()，查到好多资料说是没有清除setInterval导致内存占用，改为setTimeout后情况并没有改善。后来用开发工具查看发现是echarts2.js导致...
vue2+ echarts 运行时间太长导致内存溢出
weixin_47409897的博客
02-23 1827
vue2+ echarts 运行时间太长导致内存溢出
Vue使用axios轮询获取数据
qq_38955602的博客
03-11 2323
VUE项目使用axios向后台轮询获取数据
Vue使用轮询定时发送请求代码
10-14
Vue.js作为目前流行的前端框架之一，其提供了方便的方式来实现轮询机制。 首先，我们了解轮询的概念。在计算机科学中，轮询是指CPU定期检查每个外设的状态，看它们是否准备好接收或发送数据。在网络应用中，轮询...
使用Nginx解决Vue axios跨域访问的问题
qq_40984466的博客
06-11 3850
目录索引问题描述解决办法简要描述Vue构建打包和部署的过程 问题描述 使用Vue的axios向一个服务发起调用请求，打开Chrome的调试工具（开发者模式），会在Console控制台输出“跨域访问策略”-即服务端不支持跨域访问。 解决办法 使用Nginx作为代理访问的服务器，proxy_pass代理最初的访问请求。配置如下， worker_processes 1; error_log logs/e...
专题讨论：javascript内存泄露（包含echarts引起的内存泄漏）及谷歌浏览器查看内存使用（已实验，靠谱收藏）
haogexiaole的博客
06-28 6230
前言今天写一下javascript导致内存泄露的几种方式，及我们在平时工作中，如何通过谷歌浏览器查看内存使用情况。我前面的文章制作公司数据大屏的几点技术总结 ，里面用到了不少setInterval，setInterval用多了，会占用大量的内存，要我们必须及时清理，否则，运行时间一长，极有可能导致浏览器崩溃！几种常见的js内存泄露1、意外的全局变量JavaScript 处理未定义变量的方式比较宽松...
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-20 2120
一、目前网上常用的解决方案 //将ajax封装起来启用一个定时器达到三秒抓一次数据 window.function(){ setInterval(ajaxNew(),3000); } 存在的问题是，首次加载缓慢，用户体验性差，数据加载不友好。 二、升级定时刷新方案 // 执行异步请求 var salesinterval; getsales(); clearInterv...
页面崩溃原因分析及解决
Chieffo 的博客
03-15 4487
引言 在开发综合治理平台态势概览的大屏页面的过程，遇到了页面崩溃的问题，本帖子记录了崩溃的原因分析和解决方案。 问题 打开综合治理平台，进入态势概览页面，停留在此页面一段时间，会出现如下图所示的页面崩溃的情况。 原因分析 注：以下操作环境建议在浏览器隐身模式下进行，防止其他因素干扰 使用工具 根据页面崩溃的提示，可以初步判定是页面内存溢出导致的崩溃，为了验证内存是否溢出，可以使用 Chrome 浏览器自带的工具分析验证。这里介绍三种工具的使用，可以结合实际需求来使用。 任务管理器 1) 打开方式：
解决Vue+Echarts的手机APP页面内存溢出（页面空白问题）问题
东东唯一指定铲屎官
07-31 1202
问题背景： 手机APP页面用了echarts+vue生成图表。如下图所示，假设一开始Tab标签页1下面有三个echarts图表，Tab标签2也有三个echarts图表。 前几次切换Tba标签页可以正常生成图表，但是当切换多次以后，页面会出现空白的情况，页面也不会报错并且无明显提示。 产生原因 最终通过调试窗口发现了问题。 如图： 原因就是切换生成echarts时需要用到一部分内存，重复切换...
【实战】ECharts数据可视化之疫情实时监控展示
09-16
 项目效果展示：
前端开发必备技能知识笔记-vue项目太大内存溢出解决方法
花姐夫JUN的博客
10-22 3492
在开发工作中，我们使用Jenkins实现代码的自动发布部署，经常会遇到FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memoryJenkins报错提示翻译过来就是常见的内存溢出，搜了一下解决方式很简单，就是加依赖和执行一下npm命令解决步骤：1、在p...
解决vue项目过大导致的内存频繁溢出
weixin_46054723的博客
02-24 2450
当vue项目过大时，每次项目代码发生改变，项目很容易关闭，要重新启动，很麻烦。
解决ie11 浏览器的get请求方式缓存清除问题
qq_34507902的博客
06-18 1589
使用axios的get请求时产生缓存，致使请求的数据不是最新的。 这样的场景很多，例如我们添加或修改数据成功后，立马调用查询接口，因查询接口是get请求，产生了缓存，响应数据还是之前数据，并没有新增或修改后的数据，给人感觉像是添加或修改失败，这显然是不合理的，那么如何禁止缓存呢？ 用axios拦截器拦截请求，为get请求添加时间戳 //axios请求拦截器 axios.interceptors.request.use(config => { if (/get/i.test(config.
只使用vue3前端实现页面定时轮询源码
05-30
你可以使用Vue.js提供的定时器方法(setInterval)来实现页面的定时轮询。下面是一个简单的例子： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, mounted() { setInterval(() => { // 这里写你需要轮询的接口地址 axios.get('/api/data') .then(response => { this.message = response.data.message }) .catch(error => { console.log(error) }) }, 5000) // 每5秒轮询一次 } } </script> ``` 在上述代码中，我们通过`setInterval`方法来实现每5秒轮询一次数据。在组件的`mounted`钩子函数中，我们发送一个GET请求到`/api/data`接口地址，然后将返回的数据赋值给组件的`message`属性。这样，在页面中每5秒钟就会自动更新一次数据。 需要注意的是，如果你的接口返回的数据格式不一样，你需要相应地修改代码。此外，在实际项目中，你还需要考虑一些性能和安全性的问题，比如轮询频率、接口地址的安全性等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值