vue+echarts 项目中页面切换或者刷新图表宽度改变问题

##vue+echarts 项目中页面切换或者刷新图表宽度改变问题
1、首先安装echarts

npm install echarts --save

vue项目中main.js中引入（vue.prototype（实例化））

import echarts from 'echarts'
 
Vue.prototype.$echarts = echarts

然后再需要引入echarts图表的页面 写一个带有id和固定宽高的 DIV
下面要进行的就是再 data中引入 echarts的option

然后再methods中引入初始化图表的方法 这里我用的是$refs 用这个方法需要再相应的盒子中用ref=“id”

在然后就是给项目中的select选择框 加@change="pageshow"方法 监听 select选择器中input框 v-model绑定的value的变化
来进行页面切换 用下图中的方法就可以解决切换页面宽度改变图表不全的问题

然后再mounted中引入pageshow方法让他自动执行 （因为wide选择框设置的有默认值所以需要刷新就执行一次）

这样就解决问题了

有问题的样子 刷新后 如下图 边缘处只剩下大概10px的宽度

用这个方法刷新后的样子 图表恢复正常