根据element menu侧边栏展开收起实现echart自适应

原本是根据window.resize想实现自适应，发现侧边栏展开与收起时，窗口大小并没有改变，因此不会触发该函数，于是换成监听侧边栏展开收起的状态，来实现 echart图表宽度自适应。

 

computed: {
  ...mapGetters(['sidebar']),
  isCollapse() {
    return !this.sidebar.opened
  }
}

 

注意：这里加了个延时300ms，是因为element menu展开收起有个动画300ms，一定是在动画结束后去获取宽度，否则就是获取了之前的旧宽度，是有问题的。

 

watch: {
  // 当菜单栏展开和收起时，echarts图表宽度自适应
  isCollapse(val) {
    setTimeout(() => {
      this.width = document.querySelector('.analysis-of-trends-chart').offsetWidth + 'px'
      console.log('宽度：', this.width)
    }, 300)
  }
}

 

项目中封装好的line-echarts.vue组件中增加监听宽度的变化：

 

watch: {
  width(value) {
     console.log('width:', value)
     this.chart.resize({ width: this.width, height: this.height })
  }
}

 

收起状态：

展开状态：