echarts实例的清空与销毁-clear/dispose

这篇具有很好参考价值的文章主要介绍了echarts实例的清空与销毁-clear/dispose。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

clear和dispose是echarts提供的用于解决内存溢出的方法 

    import * as echarts from "echarts";    
    // 销毁实例
    desHander(){
        let myChart = echarts.init(this.$refs["chartDom"]);
        // 销毁实例,销毁后实例无法再被使用。
        // 在什么情况下需要调用该函数进行销毁当前的实例呢?
        // 官方给的说明:在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,
        myChart.dispose();
    },

    // 清空当前实例
    clearHander(){
        // 清空当前实例,会移除实例中所有的组件和图表。
        let myChart = echarts.init(this.$refs["chartDom"]);
        myChart.clear() 
    },
    init(){
        this.clearHander()
          //或者
        this.desHander()
        let myChart = echarts.init(this.$refs["chartDom"]);
    }

内存溢出:当程序运行时需要的内存超出了当前应用系统的剩余内存时,就造成了内存溢出的情况,直观表现就是——卡死。

所以只要使用echarts了,最好都clear或dispose一下。

echarts.clear()是清空当前实例,会移除实例中所有的组件和图表。

echarts.dispose()是销毁实例,销毁后实例无法再被使用。

我觉得clear和dispose就类似于v-show和v-if

clear类似于v-show,它只是重绘图表

dispose类似于v-if,它是将echarts对象清理了,然后重新构建echarts对象

如果连图表容器都被销毁了,那就要调用echarts.dispose()销毁实例

使用场景:当echarts图表的数据是动态更新然后渲染图表时,哪怕我们使用watch去监听了数据的变化,已经拿到了更新的数据,但是图表却没有进行相应的渲染,clear或dispose一下。文章来源地址https://www.toymoban.com/news/detail-577237.html

到了这里,关于echarts实例的清空与销毁-clear/dispose的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除

    前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13343 效果图如下: 使用方法 HTML代码实现部分

    2024年02月16日
    浏览(40)
  • Vue项目商品购物车前端本地缓存逻辑(适用H5/ipad/PC端)——前端实现购物车删除商品、购物车增减数量,清空购物车功能

    Vue3 + Vite + Ts开源后台管理系统模板 基于ElementUi或AntdUI再次封装基础组件文档 基于Element-plus再次封装基础组件文档(vue3+ts)

    2024年02月12日
    浏览(47)
  • Echarts 清空画布空白以及鼠标悬浮提示信息格式化问题

    清空画布用clear()会导致图表空白  通过上述方式清空画布不会空白 鼠标悬浮信息格式化取值

    2024年02月14日
    浏览(38)
  • QT中Qthread线程彻底销毁的实例与注意事项(防止线程资源内存泄露)

     注意: 释放线程的时候触发线程的信号与槽连接时的连接类型参数一定要是Qt::ConnectionType::DirectConnection, 否则线程销毁不了会造成内存泄露,通过任务栏开启资源管理器可监视cup的线程数变化情况。 QThread* th=new QThread();           Work* mywork=new Work ();           mywork-move

    2024年02月02日
    浏览(48)
  • 《代码实例前端》Vue-cil脚手架,二级路由,增删查改

    UserAdd.vue UserList.vue UserManagement.vue UserUpdate.vue Action.vue Comedy.vue HelloWorld.vue Movie.vue MyRouter.vue index.js AboutView.vue HomeView.vue App.vue main.js vue.config.js

    2023年04月08日
    浏览(40)
  • vue3 销毁组件方法

    问题描述:使用elementplus的dialog,当关闭弹窗后不刷新页面,直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件,或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了,只是dialog关闭了 解决方法:使

    2023年04月19日
    浏览(33)
  • vue中销毁定时器

    vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。 场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。 解决方式一: 首先在data里进行定义定时器; 然后在mounted里使用定时器; 最

    2024年02月12日
    浏览(36)
  • 关于vue组件的销毁与重载

    最近遇上了一个难题,组件应该怎么销毁呢?翻阅了很多资料,总结出了几点。 一定要在父组件写这个:key 不然就不会成功!!!!!   v-if就是直接删除这个dom,而不是display:none,所以当v-if为true的时候进来回重新加载。 和上面的一样,是写在父组件里面!! 写this.$nextTi

    2024年02月16日
    浏览(37)
  • Vue.js 组件销毁有几种情况?

    Vue.js 组件销毁有以下几种情况: 显式销毁:在组件实例上调用 $destroy() 方法可以显式销毁一个组件实例,它会解除所有的绑定并移除 DOM 中的元素。一般来说,你不需要显式地销毁组件实例,因为 Vue.js 会自动管理它们。 条件渲染:当一个组件通过 v-if 或 v-show 指令被移除时

    2024年02月12日
    浏览(42)
  • 探索Vue生命周期钩子函数:从创生到销毁

    Vue这个引领前端开发潮流的框架,其优雅的响应式数据绑定和组件式开发方式,使得它备受瞩目。然而,Vue的魅力绝不仅限于此,它还赋予开发者一组神奇的生命周期钩子函数,能够在组件的各个成长阶段插入自定义代码。本文将带你进入Vue生命周期钩子函数的奇妙世界,一

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包