Ant Design Card 组件嵌套多个 ECharts 图表时的响应式缩放问题及解决方案

最近我遇到一个需求，需要在 Ant Design 中使用 Card 组件嵌套三个 ECharts 图表，并且实现响应式缩放。问题是在按下 F12 调试工具时，ECharts 图表的缩放比例不正确，只有在缩放屏幕时，图表才能正确缩放。

经过一番排查，我发现问题出在 CSS 布局上。最开始使用的是 flex 布局，但它与 ECharts 的响应式行为并不兼容。最终，我通过切换到 Ant Design 的 Grid 布局，成功解决了这个问题，图表能够正确响应屏幕大小的变化。

问题重现：右键检查，echarts缩放比例发生不一致的问题

解决方法：使用antd本身的grid布局得到解决

以下是完整的代码：

import React, {useEffect, useRef} from "react";

import {Card, Row, Col} from "antd"; // 使用 antd 的 Grid 布局

import * as echarts from "echarts";

import "./otn_view.module.scss"; // 引入样式文件

 

const EChartsComponent = () => {

    const chartRef1 = useRef(null);

    const chartRef2 = useRef(null);

    const chartRef3 = useRef(null);

 

    useEffect(() => {

        // 初始化 ECharts 实例

        const chart1 = echarts.init(chartRef1.current);

        const chart2 = echarts.init(chartRef2.current);

        const chart3 = echarts.init(chartRef3.current);

 

        // 饼图配置

        const option = {

            tooltip: {

                trigger: "item",

                formatter: "{a} <br/>{b}: {c} ({d}%)"

            },

            series: [

                {

                    name: "访问来源",

                    type: "pie",

                    radius: "55%",

                    data: [

                        {value: 335, name: "直接访问"},

                        {value: 310, name: "邮件营销"},

                        {value: 234, name: "联盟广告"},

                        {value: 135, name: "视频广告"},

                        {value: 1548, name: "搜索引擎"}

                    ]

                }

            ]

        };

 

        // 设置图表配置

        chart1.setOption(option);

        chart2.setOption(option);

        chart3.setOption(option);

 

        // 监听窗口变化

        const handleResize = () => {

            chart1.resize();

            chart2.resize();

            chart3.resize();

        };

 

        window.addEventListener("resize", handleResize);

 

        // 清理事件监听

        return () => {

            window.removeEventListener("resize", handleResize);

            chart1.dispose();

            chart2.dispose();

            chart3.dispose();

        };

    }, []);

 

    return (

        <Card title="三个饼图" style={{width: "100%", height: "100%"}}>

            <Row style={{width: "100%", height: "100%"}}>

                <Col span={8}>

                    <div ref={chartRef1} style={{width: "100%", height: "100%"}} />

                </Col>

                <Col span={8}>

                    <div ref={chartRef2} style={{width: "100%", height: "100%"}} />

                </Col>

                <Col span={8}>

                    <div ref={chartRef3} style={{width: "100%", height: "100%"}} />

                </Col>

            </Row>

        </Card>
        //错误示例:

        // <Card title="三个饼图" style={{width: "100%", height: "100%"}}>

        //     <div ref={chartRef1} style={{width: "100%", height: "100%"}} />

        //     <div ref={chartRef2} style={{width: "100%", height: "100%"}} />

        //     <div ref={chartRef3} style={{width: "100%", height: "100%"}} />

        // </Card>

    );

};

 

export default EChartsComponent;

实现效果如下：