乐趣区

一个弹窗中多个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)
退出移动版