vue echarts图表宽度怎么一直不对？

需求与问题：

最近需要一个图表显示的项目，选择了echarts,其中初始化chart对象时候需要
获取dom节点，在vue中就使用了ref来调用，但是显示的图表的宽度显示有问题

原因分析：

vue 使用ref 标记元素，然后获取时，由于vue生命周期，其先产生虚拟dom节点，最后才挂载到页面上去，所以在获取 this.$refs.chart1 可能没有找到对应的dom节点

参考链接如下：
this.$nextTick()的原理

解决方法：

• setTimeout 设置延迟, 但是time无法确定
• this.$nextTick 等待dom加载任务完成，进入下一次执行的队列中

使用方法：

this.$nextTick()的使用方法有两种：

1. 回调函数写法

this.$nextTick(function() {
  // this is your callback
})

2.promise写法

this.$nextTick().then(()=> {
  // return a promise
}).bind(this)

以上内容仅供学习使用，如有侵权请联系删除。