主要适用mixin

1 、import {debounce} from '@/utils' // 防抖函数

mixin定义 src/mixins/resize.js

import { debounce } from '@/utils' // 防抖函数
export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    // 2，$_resizeHandler resize 事件，里面代码告诉我们chart如果存在就会调用resize 是为了保证图表显示正常
    this.$_resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    // 3，这里调用 resize 窗口大小变化时就会resize保证图表显示正常
    this.$_initResizeEvent()
    // 8，经过层层查看原来这个是侧边栏展开或者缩放时触发 resize 保证图表正常渲染
    this.$_initSidebarResizeEvent()
  },
  // 9，这个钩子下面的两个看方法名字就知道是移除上面的事件用的所以这两个方法就不细说了
  beforeDestroy() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  // 由于页面使用了 keep-alive 包裹肯定也要只要不刷新页面，第二次进入的时候就不会触发上面的钩子了所以这两个钩子内还要做重复的操作保证 resize 正常
  activated() {
    // 这里留个彩蛋  看哥们我后面的发挥
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  deactivated() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  methods: {
    // 1，activated 和 mounted 都调用了
    $_initResizeEvent() {
      // $_resizeHandler 在 mounted 的第一行就赋值了
      window.addEventListener('resize', this.$_resizeHandler)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_resizeHandler)
    },
    // 7，这个函数 transitionend 事件触发函数
    $_sidebarResizeHandler(e) {
      // 为什么要 === width 在触发呢？留个问题下面解决
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    // 4，activated 和 mounted 都调用了
    $_initSidebarResizeEvent() {
      // 5，$_sidebarElm 就是整个侧边栏 至此 data 中的两个数据我们都大概知道是干嘛的了
      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      // 6，如果这个元素存在就监听一个事件调用一个方法
      // transitionend 这个是 vue 动画的事件在 transtion 结束后触发
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    $_destroySidebarResizeEvent() {
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    }
  }
}

3、使用

import resize  from  '@/mixins/resize.js'

data(){
  return {}
},
mixin:[resize]

自此，整个适配就完成了，图表会跟着屏幕改变而变，写页面的时候，只需要根据设计稿来进行布局即可