VUE ------ Vue项目中使用echarts，自适应解决方式

定义数据模型

//核心代码
监听resize变化

mounted() {
this.initChart()
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener(‘resize’, this.__resizeHanlder)
},
beforeDestroy() {
if (!this.chart) {
return
}
window.removeEventListener(‘resize’, this.__resizeHanlder)
this.chart.dispose()
this.chart = null
},
updated() {
this.initChart();
},
其中需要这个debounce()方法

export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result

const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp

// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
  timeout = setTimeout(later, wait - last)
} else {
  timeout = null
  // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
  if (!immediate) {
    result = func.apply(context, args)
    if (!timeout) context = args = null
  }
}

}

return function(…args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}

return result

}
}