在这里插入图片描述

关于ResizeObserver

关于这个Web API,可以看mdn的官网,ResizeObserver - Web API | MDN (mozilla.org),这里面有关于这个ResizeObserver 接口的说明。这个在可视化大屏的时候,关于echarts图表可能会用到这个,也就是说,需要做到echarts自适应容器div的大小。或者是低代码平台中要开发关于echarts的组件时会用到,我在低代码项目中,自定义开发echarts组件,就用到了这个内置的API。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resize Observer with Input Events Example</title>
    <style>
        #target {
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>

<div id="target" style="width: 300px; height: 200px;">
    这个是绑定观察的元素:当前宽:300px, 高:200px
</div>

<label for="width">宽:</label>
<input type="number" id="width" value="300" min="0" max="500" placeholder="Set width">
<label for="height">高:</label>
<input type="number" id="height" value="200" min="0" max="500" placeholder="Set height">

<div>
    <button onclick="resizeObserver.disconnect()">停止观察</button>
    <button onclick="resizeObserver.observe(targetElement)">重新观察</button>
</div>

<script>
    // 创建 ResizeObserver 实例
    const resizeObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
            console.log(`元素大小改变为,宽: ${entry.contentRect.width}px ,高: ${entry.contentRect.height}px`);
            targetElement.innerHTML = `这个是绑定观察的元素:当前宽:${entry.contentRect.width}px, 高:${entry.contentRect.height}px`;
        });
    });

    // 观察目标元素
    const targetElement = document.querySelector('#target');
    // 开始观察,可以观察多个元素,根据需求选择不同的元素即可,这里只拿一个作为示例
    // const targetElement1 = document.querySelector('#target1');
    // resizeObserver.observe(targetElement1);
    resizeObserver.observe(targetElement);

    // 获取输入框元素
    const widthInputElement = document.querySelector('#width');
    const heightInputElement = document.querySelector('#height');

    // 添加 input 事件监听器
    widthInputElement.addEventListener('input', function() {
        // 更新目标元素的宽度
        targetElement.style.width = `${this.value}px`;
    });

    heightInputElement.addEventListener('input', function() {
        // 更新目标元素的高度
        targetElement.style.height = `${this.value}px`;
    });

    // 在不再需要观察时取消观察
    // resizeObserver.unobserve(targetElement);

    // 清理观察器
    // resizeObserver.disconnect();
</script>

</body>
</html>

示例代码结果如下所示

注意看GIF图中的宽高数字变化

在这里插入图片描述

echarts自适应容器div大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Resize Observer with Input Events Example</title>
    <!-- 在线引入echarts,因为是在线的,所以有可能会失效,如果链接失效了,自己去echarts官网找,然后引用即可 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>

<body>

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <label for="width">宽:</label>
    <input type="number" step="20" id="width" value="600" min="0" max="1000" placeholder="Set width">
    <label for="height">高:</label>
    <input type="number" step="20" id="height" value="400" min="0" max="800" placeholder="Set height">

    <div>
        <button onclick="resizeObserver.disconnect()">停止观察</button>
        <button onclick="resizeObserver.observe(targetElement)">重新观察</button>
    </div>

    <script>

        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 创建 ResizeObserver 实例
        const resizeObserver = new ResizeObserver(entries => {
            entries.forEach(entry => {
                console.log(`元素大小改变为,宽: ${entry.contentRect.width}px ,高: ${entry.contentRect.height}px`);
                myChart.resize();
            });
        });

        // 观察目标元素
        const targetElement = document.querySelector('#main');
        // 开始观察,可以观察多个元素,根据需求选择不同的元素即可,这里只拿一个作为示例
        // const targetElement1 = document.querySelector('#target1');
        // resizeObserver.observe(targetElement1);
        // 如果在vue中,这个应该在组件挂载时调用
        resizeObserver.observe(targetElement);

        // 获取输入框元素
        const widthInputElement = document.querySelector('#width');
        const heightInputElement = document.querySelector('#height');

        // 添加 input 事件监听器
        widthInputElement.addEventListener('input', function () {
            // 更新目标元素的宽度
            targetElement.style.width = `${this.value}px`;
        });

        heightInputElement.addEventListener('input', function () {
            // 更新目标元素的高度
            targetElement.style.height = `${this.value}px`;
        });

        // 在不再需要观察时取消观察,如果是在vue中,这个应该在组件销毁时调用
        // resizeObserver.unobserve(targetElement);

        // 清理观察器,如果是在vue中,这个应该在组件销毁时调用
        // resizeObserver.disconnect();
    </script>

</body>

</html>

示例代码结果如下所示

具体看下面的GIF图,这里通过输入数字的方式,模拟div大小变化时,echarts自适应容器大小。

在这里插入图片描述

echarts自适应容器大小的方式二

文章一:Echarts自适应div大小_echarts div resize-CSDN博客
文章二:vue3项目中让echarts适应div的大小变化,跟随div的大小改变图表大小_echart图根据div大小变化-CSDN博客

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部