页面中用了splitpanes后，echarts没有随着页面的尺寸进行调整，怎么处理？

这是 Splitpanes 改变的是容器尺寸，不是 window 尺寸 导致的典型问题。

你现在监听的是：

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

👉 只有浏览器窗口变化才触发 👉 拖动 splitpanes 分栏时 window 尺寸没变 👉 但 图表容器宽高变了 👉 ECharts 不会自动感知 DOM 尺寸变化，所以不重绘

---

✅ 正确做法：监听“容器尺寸变化”，不是 window

使用 ResizeObserver 监听图表父容器

---

🔧 Vue3 + ECharts 标准写法

import * as echarts from 'echarts'
import { onMounted, onBeforeUnmount, ref } from 'vue'

const chartRef = ref(null)
const chartInstance = ref(null)
let resizeObserver = null

onMounted(() => {
  chartInstance.value = echarts.init(chartRef.value)
  chartInstance.value.setOption(option)

  // ⭐ 监听容器尺寸变化
  resizeObserver = new ResizeObserver(() => {
    chartInstance.value?.resize()
  })
  resizeObserver.observe(chartRef.value)
})

onBeforeUnmount(() => {
  resizeObserver?.disconnect()
  chartInstance.value?.dispose()
})

---

📌 模板

<div ref="chartRef" style="width:100%; height:100%"></div>

⚠️ 高度必须有值（Splitpanes 子 pane 通常需要 height:100%）

---

🚫 为什么 window.resize 不行？

场景	window.resize	ResizeObserver
拖动 splitpanes	❌ 不触发	✅ 触发
侧边栏折叠展开	❌ 不触发	✅ 触发
标签页切换导致尺寸变化	❌	✅
浏览器窗口变化	✅	✅

---

🚀 进阶优化（防抖，防止频繁 resize）

let timer = null
resizeObserver = new ResizeObserver(() => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    chartInstance.value?.resize()
  }, 100)
})

---

🎯 结论

Splitpanes 场景必须用 ResizeObserver 监听 window.resize 是不够的

这是 ECharts 在可拖拽布局里最常见的坑之一。

如果你图表在 el-tabs、dialog、collapse、sidebar 折叠 里尺寸异常，本质也是同一个问题，也可以用这一套方案解决。

评论