ECharts响应式功能失效求助：窗口调整后图表需刷新才缩放

问题原因 #

Safari在窗口尺寸变化时，对于表格内的元素，可能无法及时让ECharts感知到容器的尺寸更新；同时直接绑定window的resize事件，存在触发时机、频率的适配问题，导致图表不会自动缩放，需刷新页面才生效。

修复方案及代码示例 #

关键调整点 #

• 让图表容器自适应父元素尺寸，避免固定视窗单位在表格布局中的计算偏差
• 添加防抖处理，减少resize事件触发频率，确保尺寸稳定后再更新图表
• 强制ECharts读取容器当前尺寸，同时补充页面加载后的初始尺寸校准

修复后的完整代码 #

<td class='drilldown'> 
    <div class='center' id='main3' style='width: 100%; height: 30vh;'></div>
    <!-- 为ECharts准备可自适应的DOM容器 -->

    <script type='text/javascript'>
        // 初始化图表实例
        var chartDom = document.getElementById('main3');
        var myChart = echarts.init(chartDom);
        
        // 防抖函数：避免resize频繁触发导致性能问题
        function debounce(func, wait) {
            let timeout;
            return function() {
                clearTimeout(timeout);
                timeout = setTimeout(func, wait);
            };
        }
        
        // 处理图表resize的逻辑
        var resizeHandler = debounce(function() {
            // 强制ECharts重新读取容器的当前尺寸
            myChart.resize({
                width: 'auto',
                height: 'auto'
            });
        }, 200);
        
        // 绑定窗口resize事件
        window.addEventListener('resize', resizeHandler);
        
        // 图表配置项
        var option = {
            title: {
                text: 'Horizontal Bar',
                left: 'center'
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                right: 'center',
                top: 'bottom',
                data: ['Sales']
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['Q1 23', 'Q2 23', 'Q3 23', 'Q4 23', 'Q1 24', 'Q2 24']
            },
            series: [
                {
                    name: 'Sales',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        
        // 渲染图表
        myChart.setOption(option);
        
        // 页面加载完成后触发一次resize，确保初始尺寸正确
        window.addEventListener('load', resizeHandler);
    </script>
</td>

多图表批量处理建议 #

如果页面中有多个图表，可以统一管理resize事件，避免重复绑定：

// 存储所有图表实例
const charts = [];
charts.push(echarts.init(document.getElementById('main1')));
charts.push(echarts.init(document.getElementById('main2')));
charts.push(echarts.init(document.getElementById('main3')));

// 统一处理所有图表的resize
window.addEventListener('resize', debounce(() => {
    charts.forEach(chart => chart.resize({ width: 'auto', height: 'auto' }));
}, 200));

内容的提问来源于stack exchange，提问作者Jlv