图表自适应方案

理解图表自适应的核心需求

图表自适应需要解决的核心问题是如何让图表在不同尺寸的容器中保持合理的显示效果。常见场景包括：

1. 浏览器窗口大小变化
2. 移动设备旋转屏幕
3. 响应式布局中容器尺寸动态调整
4. 不同分辨率设备的适配

ECharts 基础自适应配置

ECharts 提供了基础的响应式配置方式，主要通过监听 resize 事件实现：

const chart = echarts.init(document.getElementById('chart-container'));

// 基础自适应方案
window.addEventListener('resize', function() {
    chart.resize();
});

这种方案虽然简单，但在复杂场景下存在局限性：

• 无法处理非窗口尺寸变化的情况
• 频繁触发可能导致性能问题
• 缺乏细粒度的控制

高级响应式策略

基于 ResizeObserver 的方案

现代浏览器支持 ResizeObserver API，可以更精确地监听元素尺寸变化：

const chart = echarts.init(document.getElementById('chart-container'));
const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        const { width, height } = entry.contentRect;
        chart.resize({
            width: width,
            height: height
        });
    }
});

resizeObserver.observe(document.getElementById('chart-container'));

防抖优化

对于频繁的尺寸变化，建议添加防抖处理：

function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

const chart = echarts.init(document.getElementById('chart-container'));
const debouncedResize = debounce(() => chart.resize(), 300);

window.addEventListener('resize', debouncedResize);

多图表联动自适应

当页面中存在多个需要联动的图表时，可以采用统一管理的方式：

const charts = [];

function registerChart(chart) {
    charts.push(chart);
}

function resizeAllCharts() {
    charts.forEach(chart => chart.resize());
}

window.addEventListener('resize', debounce(resizeAllCharts, 200));

// 初始化图表
const chart1 = echarts.init(document.getElementById('chart1'));
registerChart(chart1);

const chart2 = echarts.init(document.getElementById('chart2'));
registerChart(chart2);

移动端特殊处理

移动端需要考虑横竖屏切换和虚拟键盘弹出等场景：

const chart = echarts.init(document.getElementById('chart-container'));

// 处理屏幕旋转
const handleOrientationChange = () => {
    setTimeout(() => {
        chart.resize();
    }, 300); // 等待旋转动画完成
};

// 处理虚拟键盘弹出
const handleVisualViewportChange = () => {
    chart.resize();
};

window.addEventListener('orientationchange', handleOrientationChange);
window.visualViewport.addEventListener('resize', handleVisualViewportChange);

基于 CSS 的适配方案

结合 CSS 可以创建更灵活的布局：

<div class="chart-wrapper">
    <div id="chart-container" style="width: 100%; height: 100%;"></div>
</div>

<style>
    .chart-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 比例 */
    }
    
    #chart-container {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

复杂场景下的自适应策略

动态数据适配

当数据量变化时，图表可能需要调整：

function updateChart(data) {
    const option = {
        // ...图表配置
        series: [{
            data: data,
            // 根据数据长度调整视觉效果
            label: {
                show: data.length < 20
            }
        }]
    };
    
    chart.setOption(option);
    chart.resize(); // 确保更新后重新计算布局
}

主题切换适配

切换主题时需要考虑尺寸重新计算：

function changeTheme(themeName) {
    chart.dispose(); // 销毁旧实例
    chart = echarts.init(
        document.getElementById('chart-container'),
        themeName
    );
    chart.setOption(option);
    chart.resize(); // 重新初始化后必须调用resize
}

性能优化技巧

对于高频变化的场景，可以采用以下优化：

let isResizing = false;

function optimizedResize() {
    if (isResizing) return;
    
    isResizing = true;
    requestAnimationFrame(() => {
        chart.resize();
        isResizing = false;
    });
}

window.addEventListener('resize', optimizedResize);

服务端渲染(SSR)的特殊处理

在SSR场景下，需要等待客户端hydrate完成后再初始化：

if (typeof window !== 'undefined') {
    // 只在客户端执行
    window.addEventListener('load', () => {
        const chart = echarts.init(document.getElementById('chart-container'));
        // 确保DOM完全加载
        setTimeout(() => chart.resize(), 0);
    });
}

常见问题解决方案

容器隐藏时的尺寸问题

当图表容器初始时处于隐藏状态，需要特殊处理：

function initChartWhenVisible(containerId) {
    const container = document.getElementById(containerId);
    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            const chart = echarts.init(container);
            // ...初始化图表
            chart.resize();
            observer.unobserve(container);
        }
    });
    
    observer.observe(container);
}

动画与自适应的冲突

在动画过程中避免频繁重绘：

let isAnimating = false;

chart.on('animationstart', () => {
    isAnimating = true;
});

chart.on('animationend', () => {
    isAnimating = false;
    chart.resize(); // 动画结束后确保尺寸正确
});

window.addEventListener('resize', () => {
    if (!isAnimating) {
        chart.resize();
    }
});

框架集成方案

React 中的实现

使用React Hooks实现响应式图表：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function ResponsiveChart({ option }) {
    const chartRef = useRef(null);
    const chartInstance = useRef(null);

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        chartInstance.current = chart;
        chart.setOption(option);
        
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        
        resizeObserver.observe(chartRef.current);
        
        return () => {
            resizeObserver.disconnect();
            chart.dispose();
        };
    }, [option]);

    return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

Vue 中的实现

Vue组合式API实现方案：

<template>
    <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

export default {
    props: ['option'],
    setup(props) {
        const chartContainer = ref(null);
        let chart = null;
        let resizeObserver = null;

        const initChart = () => {
            if (chartContainer.value) {
                chart = echarts.init(chartContainer.value);
                chart.setOption(props.option);
                
                resizeObserver = new ResizeObserver(() => {
                    chart.resize();
                });
                
                resizeObserver.observe(chartContainer.value);
            }
        };

        onMounted(initChart);
        
        onUnmounted(() => {
            if (resizeObserver) resizeObserver.disconnect();
            if (chart) chart.dispose();
        });

        watch(() => props.option, (newOption) => {
            if (chart) {
                chart.setOption(newOption);
                chart.resize();
            }
        }, { deep: true });

        return { chartContainer };
    }
};
</script>

极端情况处理

超大屏幕适配

对于超大屏幕，可能需要限制最大尺寸：

const chart = echarts.init(document.getElementById('chart-container'));

function adaptiveResize() {
    const container = document.getElementById('chart-container');
    const maxWidth = 2560; // 最大宽度限制
    const maxHeight = 1440; // 最大高度限制
    
    let width = container.clientWidth;
    let height = container.clientHeight;
    
    if (width > maxWidth) width = maxWidth;
    if (height > maxHeight) height = maxHeight;
    
    chart.resize({
        width: width,
        height: height
    });
}

window.addEventListener('resize', debounce(adaptiveResize, 200));

超小屏幕优化

对于移动设备小屏幕，可能需要简化图表：

function getAdaptiveOption(isSmallScreen) {
    return {
        grid: {
            top: isSmallScreen ? 20 : 40,
            right: isSmallScreen ? 10 : 20,
            bottom: isSmallScreen ? 20 : 40,
            left: isSmallScreen ? 10 : 20
        },
        legend: {
            show: !isSmallScreen,
            orient: isSmallScreen ? 'horizontal' : 'vertical'
        },
        // 其他适配配置...
    };
}

function checkScreenSize() {
    const isSmallScreen = window.innerWidth < 768;
    chart.setOption(getAdaptiveOption(isSmallScreen));
    chart.resize();
}

window.addEventListener('resize', debounce(checkScreenSize, 200));