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

场景

两个按钮，点击按钮A，弹出弹窗，在弹窗的弹出回调中根据按钮功能请求数据，然后获取弹窗中的echarts容器，调用echarts的init方法，得到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)