您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-31
后台-插件-广告管理-内容页头部广告(手机)

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

  1. import * as echarts from "echarts";
  2. // 销毁实例
  3. desHander(){
  4. let myChart = echarts.init(this.$refs["chartDom"]);
  5. // 销毁实例,销毁后实例无法再被使用。
  6. // 在什么情况下需要调用该函数进行销毁当前的实例呢?
  7. // 官方给的说明:在图表容器被销毁之后,调用 echartsInstance.dispose 销毁实例,
  8. myChart.dispose();
  9. },
  10. // 清空当前实例
  11. clearHander(){
  12. // 清空当前实例,会移除实例中所有的组件和图表。
  13. let myChart = echarts.init(this.$refs["chartDom"]);
  14. myChart.clear()
  15. },
  16. init(){
  17. this.clearHander()
  18. //或者
  19. this.desHander()
  20. let myChart = echarts.init(this.$refs["chartDom"]);
  21. }

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

所以只要使用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一下。

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索