Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

时间:2021-12-15 12:03:45

问题:

  vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新。

解决办法:

  刚开始以为是vue绑定的数据没有绑定成功,查找资料后发现并不是vue的问题,而是echarts的问题,echarts的数据发生改变时并不会自动刷新,而是需要重新创建这个图表,于是将图表创建部分封装成一个函数,在mounted请求到远程数据后调用这个函数,并将参数以形参的方式传给函数,这样函数图标创建时的数据就是更新后的数据了,再以这个新数据创建图表就能达到理想的效果了。