DIV监听 size 变化
resize 事件通常用于监听窗口大小的变化，而不是 div 元素的大小变化。不过，你可以使用 ResizeObserver API 来监听 div 元素的大小变化。下面是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize Observer Example</title>
<style>
#resizeDiv {
width: 300px;
height: 200px;
background-color: lightblue;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div id="resizeDiv"></div>
<script>
const resizeDiv = document.getElementById('resizeDiv');
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
console.log(`Width: ${width}, Height: ${height}`);
}
});
resizeObserver.observe(resizeDiv);
</script>
</body>
</html>
在这个例子中，我们创建了一个可调整大小的 div 元素，并使用 ResizeObserver 监听其大小变化。当 div 的大小发生变化时，触发回调函数并打印出新的宽度和高度。
我们在绘制ECharts图表时 , 如果您的图表容器的父级元素的宽高发生变化，而不是整个窗口大小变化，您仍然可以使用 resize 方法来手动触发图表的适应性调整。这可以通过监控父级元素的大小变化来实现。
以下是一个示例，展示如何在父级元素大小变化时手动调整 ECharts 图表的大小：
// 获取图表容器的父级元素
var chartContainerParent = document.getElementById('parentOfYourChartContainer');
// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('yourChartContainer'));
// 设置图表配置
var option = {
// 图表配置项
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 监听父级元素大小变化事件
var resizeObserver = new ResizeObserver(function () {
// 调用 resize 方法，使图表自动适应新的容器尺寸
myChart.resize();
});
// 监听 chartContainerParent 元素的大小变化
resizeObserver.observe(chartContainerParent);
在上述代码中，我们使用了 ResizeObserver 对象来监测父级元素的大小变化。在大小变化时，resizeObserver 会触发回调函数，该回调函数中调用了 myChart.resize() 方法，从而使图表适应新的容器尺寸。
确保将 'yourChartContainer' 替换为实际的 ECharts 图表容器的 ID，以及 'parentOfYourChartContainer' 替换为图表容器的父级元素的 ID。这样，即使窗口大小没有变化，只有父级容器的大小变化，图表仍会相应地进行调整。
我，秦始皇，打钱！
