如何优雅地实现 echarts 的自适应

发表于 分类于 ， ， ， 本文字数： 630 阅读时长 ≈ 1 分钟

要实现 echarts 窗口自适应变化，可以使用 ResizeObserver API 监听容器元素的大小变化，并在容器大小变化时调用 echarts 实例的 resize() 方法重新渲染图表。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { watch } from 'vue'

/**
 * eCharts 图表自适应
 * 在 chart 值就去时会自动注册自适应逻辑
 * @param {ref} echartRef
 */
export function resizeECharts(echartRef) {
  if (!echartRef) return

  function resizeCallback() {
    if (echartRef && echartRef.value) echartRef.value.resize()
  }

  watch(echart, newValue => {
    if (!newValue) return
    const parentDom = newValue._dom.parentElement
    // 监听 parentDom 元素的大小变化
    const observer = new ResizeObserver(() => {
      resizeCallback()
    })
    observer.observe(parentDom)
  })
}