【转载】Vue打包后Echarts图表不显示问题解决
原文链接:https://blog.csdn.net/yyz_1987/article/details/119903964工作中刚好碰到的问题,然后找到这篇文章,这篇文章是转载的。最近发现一奇怪问题,正常本机测试情况下,echarts图表显示的没问题。但是只要打包后部署到nginx里,第一次首页加载没问题,但进入其他tab页面再返回首页时,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生命周期里,对资源进行释放。
这样再次打包后部署,问题已解决啦。无论怎么切换标签页,再返回首页的图表仍正常显示。
更多推荐
所有评论(0)