解决Vue项目中使用Echarts，宽度变化导致图不能resize问题

开发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