vue项目侧边栏伸缩后echarts自适应解决办法

问题描述:

当侧边栏收缩后,内容区会变宽,因此echarts需要随之变宽

问题分析:

问题难点在于因为内容区变宽了,但是内容区的内容宽度比例没有变,我们没法通过mutationobserver对元素进行监视,因此我们需要找到一触发条件,来触发echarts自身的resize方法。

解决方法:

我们可以借鉴vue-element-admin中的方法,通过transitionend方法,检测侧边栏的transition,当过渡发生并完成后,触发该事件,在该事件中再触发echarts的resize方法

代码

我们可以将这个过程提取成mixins

/*
mixins/resize.js
*/ 
export default {
  data() {
    return {
      _aside: null,
      _onResize: null,
    };
  },
  mounted() {
    // this问题必须使用箭头函数
    this._onResize = () => {
      if (this.mychar) {
        this.mychar.resize();
      }
    };
    this.$_initResizeEvent();
    this.$_initSidebarResizeEvent();
  },
  beforeDestroy() {
    this.$_destroyResizeEvent();
    this.$_destroySidebarResizeEvent();
  },
  methods: {
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this._onResize();
      }
    },
    $_initResizeEvent() {
      window.addEventListener('resize', this._onResize);
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this._onResize);
    },
    $_initSidebarResizeEvent() {
      // 给侧边栏添加transitionend事件
      this._aside = document.querySelector('.aside');
      this._aside &&
        this._aside.addEventListener(
          'transitionend',
          this.$_sidebarResizeHandler
        );
    },
    $_destroySidebarResizeEvent() {
      this._aside &&
        this._aside.removeEventListener(
          'transitionend',
          this.$_sidebarResizeHandler
        );
    },
  },
};