开发PC端管理系统，项目左侧目录可收缩，右侧是对应的页面，右侧页面里面包含了echarts开发的几个图表
1
当左侧收起时
2
虽然设置了
resize方法，但是并没有用
网上查了一下，大多都是用了element-resize-detector插件解决这个需求，试了一下，确实可以，放一篇讲的比较明了的链接，但是效果不是很满意，卡顿严重，体验不好，于是做了点小改动。
将原先放在setTimeout的resize方法拿出来，用一个变量代替，然后通过watch监听这个变量的变化，再设置图表的resize，从而减轻卡顿效果，350ms是自己试过的体验比较好间隔值，可以根绝需要自己调整。
watch: {
chartBoxW(newV, oldV) {
this.chartRevenue.resize() // 营收数据
this.chartGrowthRate.resize() // 增长率数据
}
},
mounted(){
let _this = this;
let erd = elementResizeDetectorMaker();
//chart-box为图表的父级div，通过监听父级div的宽度设置watch变量的值
erd.listenTo(document.getElementsByClassName('chart-box')[0], () => {
setTimeout(() => {
_this.chartBoxW = $('.chart-box').width()
}, 350)
});
}
3
