echarts 自动适配宽度

echarts 自动适配宽度

一.要有一个防抖函数

/**
 *  函数防抖
 *  @param {Function} func  包装的函数
 *  @param {num} delay      延迟时间
 *  @param {boolean} immediate 第一次滚动会执行两次  开始滚动和结束滚动的时候
 *  @return {*}
 */

export function debounce(func, delay, immediate = false) {
  let timer
  const context = this
  return (...args) => {
    if (immediate) {
      func.apply(context, args)
      immediate = false
      return
    }
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(context, args)
    }, delay)
  }
}

二.直接调用

chart.value = echarts.init(echart.value /* 'macarons' */)


onMounted(async() => {
  await nextTick()

  window.addEventListener('resize', resizeHandler)
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
  window.removeEventListener('resize', resizeHandler)
})

const resizeHandler = debounce(() => {
  if (chart.value) {
    chart.value.resize()
  }
}, 200)