监听图表容器的大小并改变图表大小
在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。
这种情况下,可以监听页面的 resize
事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize 改变图表的大小。
<style>
#main,
html,
body {
width: 100%;
}
#main {
height: 400px;
}
</style>
<div id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
注意:
有时候我们可能会通过 JS 或 CSS 调整容器大小,由于页面大小并未发生改变,因此 resize
事件将不会被触发。如果有需要覆盖这种情况,可以借助浏览器的 ResizeObserver API 来实现更细粒度的监听。
以下是在 vue3 中使用 ResizeObserver 来实现图表大小随容器大小改变而改变:
nextTick(() => {
const maine = document.getElementById("maine"); // 获取dom元素
const objResizeObserver = new ResizeObserver(function (entries) {
console.log("观察者函数被执行");
myChart.value.resize();
});
objResizeObserver.observe(maine);
})
使用 nextTick 确保在 DOM 更新后执行操作。 创建了一个 ResizeObserver 对象,在被观察的元素大小变化时执行指定的回调函数。在回调函数中,通过 myChart.value.resize()
来重新调整图表的大小。将 ResizeObserver 对象绑定到 maine 元素上,以便观察其大小变化。