最近发现一奇怪问题，正常本机测试情况下，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生命周期里，对资源进行释放。
这样再次打包后部署，问题已解决啦。无论怎么切换标签页，再返回首页的图表仍正常显示。
