echarts自适应问题高级解决方案

1. 背景

在移动端或者 PC 端当页面尺寸发生变化时，echarts 图表需要自适应，以适应页面尺寸的变化。

2. 解决方案

增加图表 resize

window.addEventListener("resize", function () {
  chart.resize()
})

解决 canvas 画布大小和容器大小不一致的问题

window.addEventListener("resize", () => resizeHandler())

// Auto resizes the chart when the browser window is resized.
const resizeHandler = () => {
  console.log("resize..")
  if (!chart) return
  let width = myChart.value.offsetWidth
  let height = myChart.value.offsetHeight
  chart.resize(width, height)
}

注意

• 窗口改变时 EChart 会立即获取宽度，但是此时宽度还在变化中，可能不是最终值，所以 ECharts 显示有问题，修改方法是添加一个延时。

window.addEventListener("resize", function () {
  setTimeout(() => {
    resizeHandler()
  }, 100)
})