左边侧边栏的缩放造成echarts的挤压问题

今天偶遇一个bug，左边侧边栏是那种可以缩放的，但是会造成echarts没有自适应父盒子的宽，刷新页面也会造成echarts的挤压，但是从别的页面跳转过来就不会造成这个问题，根据大神的写法成功解决bug，特此记录一下！！

问题：

解决第一个问题：这个是根据vue-element-admin里面的写法改编

写一个mixins

/**解决左侧菜单栏缩放造成echarts挤压
 */
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('.ant-layout-sider-children');
      this._aside && this._aside.addEventListener('transitionend', this.$_sidebarResizeHandler);
    },
    $_destroySidebarResizeEvent() {
      this._aside && this._aside.removeEventListener('transitionend', this.$_sidebarResizeHandler);
    }
  }
};

在组件中直接按照mixins引入的方式引入即可。。

引用https://blog.csdn.net/YwXinnn/article/details/128886607?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170114012816800188586639%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170114012816800188586639&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-128886607-null-null.142^v96^pc_search_result_base5&utm_term=antd%20%E4%BE%A7%E8%BE%B9%E6%A0%8F%E4%BC%B8%E7%BC%A9%E6%97%B6echarts%20%E7%9B%91%E5%90%AC%E4%B8%8D%E5%88%B0%E7%AA%97%E5%8F%A3%E5%8F%98%E5%8C%96&spm=1018.2226.3001.4187

解决第一个问题：网上的方法很多，我就是直接延迟执行即可

this.timer = setTimeout(() => {
      this.initEcharts();
    }, 50);