如何让ECharts文本及图例区域适配不同屏幕尺寸？

我正在使用ECharts for React库绘制饼图可视化数据。当屏幕尺寸增大时，画布会随之缩放，但标题、图例等文本大小却保持不变。我尝试用CSS媒体查询解决，但没效果，希望实现文本及图例区域的响应式适配，让它们能随屏幕尺寸变化自动调整。

原配置代码：

const optionPieChart = {
        color: [
            '#2B6AA9',
            '#2845AB',
            '#F8FAFF',
            '#4EBDDE'
        ],
        title: {
            text: 'Conversation Type',
            left: 'left',
            top: '10%',
            padding: 15,
            textStyle: {
                color: '#ffffff',
                opacity: '0.7',
                fontWeight: '400',
                fontFamily: 'poppins',
                fontSize: '18px'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            itemGap: 10,
            show: true,
            padding: 15,
            orient: 'vertical',
            left: 'left',
            top: '50%',
            itemWidth: 15,
            textStyle: {
                color: '#C4D8FF',
                fontFamily: 'poppins',
                fontSize: '14px'
            }
        },
        series: [
            {
                type: 'pie',
                radius: '80%',
                padding: '0',
                left: '160',
                data: [
                    { value: 1048, name: 'FAQs' },
                    { value: 735, name: 'Small Talks' },
                    { value: 580, name: 'Product inquiries' },
                    { value: 484, name: 'Escalate Hop' },
                ],
                label: {
                    show: false
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        backgroundColor: {
            type: 'radial',
            x: 0.3,
            y: 0.3,
            r: 0.8,
            colorStops: [
                {
                    offset: 0,
                    color: '#122C44'
                },
                {
                    offset: 1,
                    color: '#133351'
                }
            ]
        },
    };

方法1：使用ECharts官方media响应式配置（推荐） #

ECharts内置了media配置项，可根据不同屏幕尺寸自动切换配置，比CSS媒体查询更适配ECharts组件。直接在配置中添加media数组，定义不同断点下的文本大小、图例参数：

const optionPieChart = {
    color: [
        '#2B6AA9',
        '#2845AB',
        '#F8FAFF',
        '#4EBDDE'
    ],
    title: {
        text: 'Conversation Type',
        left: 'left',
        top: '10%',
        padding: 15,
        textStyle: {
            color: '#ffffff',
            opacity: '0.7',
            fontWeight: '400',
            fontFamily: 'poppins',
            fontSize: '18px' // 默认字体大小
        }
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        itemGap: 10,
        show: true,
        padding: 15,
        orient: 'vertical',
        left: 'left',
        top: '50%',
        itemWidth: 15, // 默认图例图标宽度
        textStyle: {
            color: '#C4D8FF',
            fontFamily: 'poppins',
            fontSize: '14px' // 默认图例文本大小
        }
    },
    series: [
        {
            type: 'pie',
            radius: '80%',
            padding: '0',
            left: '160',
            data: [
                { value: 1048, name: 'FAQs' },
                { value: 735, name: 'Small Talks' },
                { value: 580, name: 'Product inquiries' },
                { value: 484, name: 'Escalate Hop' },
            ],
            label: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
    backgroundColor: {
        type: 'radial',
        x: 0.3,
        y: 0.3,
        r: 0.8,
        colorStops: [
            {
                offset: 0,
                color: '#122C44'
            },
            {
                offset: 1,
                color: '#133351'
            }
        ]
    },
    // 新增media响应式配置
    media: [
        // 屏幕宽度≥1200px时的配置
        {
            query: {
                minWidth: 1200
            },
            option: {
                title: {
                    textStyle: {
                        fontSize: '24px'
                    }
                },
                legend: {
                    itemWidth: 20,
                    itemGap: 15,
                    textStyle: {
                        fontSize: '18px'
                    }
                }
            }
        },
        // 屏幕宽度在768px-1199px之间的配置
        {
            query: {
                minWidth: 768,
                maxWidth: 1199
            },
            option: {
                title: {
                    textStyle: {
                        fontSize: '20px'
                    }
                },
                legend: {
                    itemWidth: 18,
                    itemGap: 12,
                    textStyle: {
                        fontSize: '16px'
                    }
                }
            }
        },
        // 屏幕宽度≤767px时的配置
        {
            query: {
                maxWidth: 767
            },
            option: {
                title: {
                    textStyle: {
                        fontSize: '16px'
                    }
                },
                legend: {
                    itemWidth: 12,
                    itemGap: 8,
                    textStyle: {
                        fontSize: '12px'
                    },
                    // 小屏幕调整图例位置避免遮挡饼图
                    top: '80%',
                    orient: 'horizontal'
                },
                series: [
                    {
                        left: '20%' // 调整饼图位置适配小屏幕
                    }
                ]
            }
        }
    ]
};

方法2：监听窗口resize事件动态更新配置 #

如果需要更灵活的自定义逻辑，可在React组件中监听窗口resize事件，根据当前画布尺寸计算文本大小，再更新ECharts实例配置：

import React, { useEffect, useRef } from 'react';
import ReactECharts from 'echarts-for-react';

const PieChart = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        const handleResize = () => {
            const chartInstance = chartRef.current?.getEchartsInstance();
            if (!chartInstance) return;

            // 获取当前画布宽度
            const chartWidth = chartInstance.getDom().offsetWidth;
            // 根据宽度动态计算字体尺寸（可自定义计算逻辑）
            const titleFontSize = Math.max(16, Math.floor(chartWidth / 60));
            const legendFontSize = Math.max(12, Math.floor(chartWidth / 80));
            const legendItemWidth = Math.max(12, Math.floor(chartWidth / 60));

            // 更新图表配置
            chartInstance.setOption({
                title: {
                    textStyle: {
                        fontSize: `${titleFontSize}px`
                    }
                },
                legend: {
                    itemWidth: legendItemWidth,
                    textStyle: {
                        fontSize: `${legendFontSize}px`
                    }
                }
            });
        };

        // 初始化时执行一次
        handleResize();
        // 添加resize监听
        window.addEventListener('resize', handleResize);
        // 组件卸载时清理监听
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return <ReactECharts ref={chartRef} option={optionPieChart} />;
};

export default PieChart;

注意事项 #

• 方法1是ECharts官方推荐方案，配置简洁，无需额外事件监听；
• 方法2适合需要复杂动态计算的场景，比如结合画布高度或其他元素尺寸调整；
• 不要用CSS媒体查询直接修改ECharts文本，因为ECharts文本由Canvas渲染，CSS无法直接控制。

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