最近发现一奇怪问题，正常本机测试情况下，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生命周期里，对资源进行释放。

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。