原文链接:https://blog.csdn.net/yyz_1987/article/details/119903964

工作中刚好碰到的问题,然后找到这篇文章,这篇文章是转载的。


最近发现一奇怪问题,正常本机测试情况下,echarts图表显示的没问题。但是只要打包后部署到nginx里,第一次首页加载没问题,但进入其他tab页面再返回首页时,echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。

网上有很多的说辞和办法,但试过了都没有效果。最后经过不断的尝试摸索,终于解决啦。

有的说是生命周期和渲染顺序问题,说大家习惯了在mounted生命周期里面发送请求,mounted意思是页面已挂载完成,可以拿到dom节点了,这也说明echarts图表的dom结构也会在mounted的时候去挂载,然而这个时候我们的数据还没有请求回来,自然也就无法渲染出来了,需要在挂载之前就将数据请求回来,把请求放到created周期里。

还有的怀疑打包的有问题,考虑是不是 vue-cli 打包后不支持AMD 模式造成引入echart失败 。不然为什么不打包就能正常没有问题了! 第二个方向是解决define关键字 未定义的错误。

还有的说是,用 $nextTick方法,让它在下一个事件队列中去渲染。如:

mounted() {
	console.log('mounted initChart')
    this.$nextTick(() => {
       //  执行echarts方法
      this.initChart()
    })
},

然而,这些方法都试了,都没能解决我的问题。还是出现第一次首页展示时可以正常显示,然而切换标签页,再返回首页就又没了。

最终解决办法如下,先看下之前的写法:

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initChart(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        })
    }
  }
}

这种写法有问题吗?表面上看着好像也没问题。第一次准能加载出来。刷新也能加载出来。

然而就是切换标签页,再返回首页,图表不见了!而且这在本机上没问题,打包后就会出现这问题。

怎么解决呢?

规范的写法如下:

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
      myChart:null
    }
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initChart(){
        // 基于准备好的dom,初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        })
    }
  },
 beforeUnmount() {
            console.log('beforeUnmount')
            if (!this.myChart) {
                return
            }
            // window.removeEventListener('resize', this.__resizeHandler)
            this.myChart.dispose()
            this.myChart = null
        },
}

把echarts示例,在data里声明。并在beforeUnmount生命周期里,对资源进行释放。

这样再次打包后部署,问题已解决啦。无论怎么切换标签页,再返回首页的图表仍正常显示。

Logo

前往低代码交流专区

更多推荐