一个弹窗中多个echarts切换图表混乱问题及解决

场景

两个按钮,点击按钮A,弹出弹窗,在弹窗的弹出回调中根据按钮功能请求数据,然后获取弹窗中的echarts容器,调用echartsinit方法,得到echarts实例,然后配置option,最后调用setOption方法渲染,折线图显示正常,然后关闭弹窗,点击按钮B,重复上面的步骤,但是最后渲染出来的折线图错乱。

操作

点击按钮A,数据显示正常,然后关闭弹窗

在这里插入图片描述

点击按钮B,折线图错乱


在这里插入图片描述

总结

出现上面的情况后,刷新页面再打开就正常,但是如果先打开A弹窗,再打开B弹窗,还是会出现上面的情况,混乱后的折线图就好像是上个弹窗里面折线图的数据缓存,所以就查找echarts文档,查看有没有清楚缓存或者其他什么方法

解决

方法一:echarts.dispose()

在这里插入图片描述

在调用init方法初始化echarts实例前,先使用'echarts.dispose()'方法销毁echarts实例
这个方法是echarts的方法,不是echarts实例的方法,是直接销毁echarts实例,所以要在初始化实例前使用

me.$echarts.dispose(me.$refs['allWeekEcharts'])
var allWeekEcharts = me.$echarts.init(me.$refs['allWeekEcharts']);
allWeekEcharts.setOption(option,true)

方法二:echartsInstance.clear()

在这里插入图片描述

在调用init方法得到echarts实例后,再使用实例的‘clear()’方法,清空实例中的所有组件和图表
这个方法是echarts实例的方法,所以要在使用init获取实例后,再调用这个方法

 var allWeekEcharts = me.$echarts.init(me.$refs['allWeekEcharts']);
 allWeekEcharts.clear()
 allWeekEcharts.setOption(option,true)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 11,730评论 0 17
  • 愿你不畏将来 不念过去愿你能辨是非 深明大义 愿你心存感激 心胸宽广愿你不再熬夜 ...
    丨丶Mine阅读 2,849评论 0 1
  • 今天小家伙第一次参加钢琴比赛,赛前发生了一件事情,让我感到非常不爽。原本比赛这个事情,一直没有和她提过关于获奖和名...
    唐铭含阅读 2,463评论 0 1
  • 网络世界的丰富,让一批批的大V脱颖而出,他们占据了舆论的制高点,成为了受众多粉丝追捧的对象,更是各个商家求之不得的...
    狂飙的蜗牛711阅读 845评论 0 0
  • 今天有点不开心,我分析了这些不开心的根源,应该是公公变相强迫我干了一些我不想干的事情,但是这个事情的确对我是有好处...
    tutu_16eb阅读 708评论 0 0