vue+echarts 监测窗口变化 缩放窗口切换有echarts的页面 echarts会空白不出现控制台也没有报错信息

**1、问题:**我有两个页面有大量的echarts 并且进行了监测窗口缩放echarts自适应大小在这里插入代码片,但是我进行缩放窗口之后切换这两个页面甚至切换其他页面,都会有echarts空白不出现,控制台也没有报错信息。
**2、分析产生问题的原因:**因为控制台并没有报错信息,说明代码实现的逻辑没什么问题,也不会是echarts等版本的原因,首先排查切换 页面时是否是dom还未进行加载,也就是代码执行顺序的原因,经过检查之后并不是这样的问题,那么就只可能是一种情况了(因为控制台并没有报错的原因),那就是浏览器缓存导致切换页面的时候会出现dom没变化的情况(比较类似于echarts在v-show v-if下的问题),这就比较简单了 系统中实现主区域加载切换页面的是<keep-alive> <router-view /> </keep-alive>页面初始化方法的调用在钩子函数中activated()
**3、解决办法:**将keep-alive去除页面中初始化加载方法的调用改为mounted()完美解决

echarts 自适应

mounted () {
    this.$nextTick(() => {
      const myChart = echarts.init(document.getElementById('activity_myChart'))
      const myChart2 = echarts.init(document.getElementById('activity_myChart2'))
      const myChart3 = echarts.init(document.getElementById('activity_myChart3'))
      const myChart4 = echarts.init(document.getElementById('activity_myChart4'))
      // this.getDataList()
      this.getCharts(myChart)
      this.getCharts2(myChart2)
      this.getCharts3(myChart3)
      this.getCharts4(myChart4)

      window.addEventListener('resize', function () {
        myChart.resize()
        myChart2.resize()
        myChart3.resize()
        myChart4.resize()
      })
    })
  },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值