美文网首页
一个弹窗中多个echarts切换图表混乱问题及解决

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

作者: 月半小夜曲_ | 来源:发表于2019-11-20 15:11 被阅读0次

    场景

    两个按钮,点击按钮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)
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/lxmoictx.html