vue实现echarts防抖自适应+

防抖

用户如果频繁操作浏览器窗口大小时 以N秒后最后一次操作执行

封装看1 不封装看2

1.封装自适应文件

创建一个封装文件 echartsResize.js

// 防抖函数
export default function debounce(fn, delay) {
  let timer = null

  return function () {
    // 获取函数的作用域和变量
    const context = this
    const args = arguments

    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

组件引用

在组件内引用刚刚的封装文件

// 引用
import chartResize from '@/utils/echartsResize'

mounted() {
    // 监听浏览器窗口变化
    window.addEventListener('resize', this.handleResize)
},

beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.handleResize)
},
methods: {
    // echarts防抖重绘
    handleResize: chartResize(function () {
        // 重绘
        this.charts.resize()
    }, 300),
}

2.不封装直接使用