【转载】Vue打包后Echarts图表不显示问题解决

原文链接：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生命周期里，对资源进行释放。

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