echarts-for-react图表固定413/280比例滚动时高度异常问题

问题描述 #

使用echarts-for-react创建图表，为保持413/280的比例，给图表容器设置了aspect-[413/280] w-[50%]样式，但滚动页面时图表高度改变，比例被破坏。

复现代码 #

App.js #

import ReactECharts from "echarts-for-react";
import "./App.css";
import "./index.css";

function App() {
  const x = [1, 2, 3];
  const y = [2, 3, 9];
  const color = "black";
  const option = {
    xAxis: {
      type: "category",
      data: x,
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: y,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "black",
        },
      },
    ],
  };
  return (
    <>
      <div className="aspect-[1920/1080] w-full font-red flex justify-center items-center">
        <div className="aspect-[413/280] w-[50%] bg-[lightblue]">
          {" "}
          <ReactECharts option={option} />
        </div>
      </div>
    </>
  );
}

export default App;

package.json #

{
  "name": "tes2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "echarts": "^5.4.3",
    "echarts-for-react": "^3.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "vite": "^5.0.8"
  }
}

解决方法 #

方法1：固定图表占满容器，优化重绘配置 #

移除容器内的空白字符，给ReactECharts组件设置100%宽高，并添加重绘控制参数：

// 替换原返回部分
return (
  <>
    <div className="aspect-[1920/1080] w-full font-red flex justify-center items-center">
      <div className="aspect-[413/280] w-[50%] bg-[lightblue]">
        <ReactECharts
          option={option}
          style={{ width: "100%", height: "100%" }}
          notMerge={true}
          lazyUpdate={true}
        />
      </div>
    </div>
  </>
);

• style={{ width: "100%", height: "100%" }}确保图表完全填充容器空间
• notMerge和lazyUpdate减少不必要的重绘，避免尺寸计算异常

方法2：手动监听滚动触发图表resize #

通过ref获取ECharts实例，监听滚动事件强制重新计算尺寸：

import React, { useEffect, useRef } from "react";
import ReactECharts from "echarts-for-react";
import "./App.css";
import "./index.css";

function App() {
  const x = [1, 2, 3];
  const y = [2, 3, 9];
  const color = "black";
  const chartRef = useRef(null);

  const option = {
    xAxis: {
      type: "category",
      data: x,
    },
    yAxis: {
      type: "value",
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: y,
        type: "line",
        smooth: true,
        itemStyle: {
          opacity: 0,
          color: "black",
        },
        lineStyle: {
          color: "black",
        },
      },
    ],
  };

  useEffect(() => {
    const handleScroll = () => {
      if (chartRef.current) {
        const chartInstance = chartRef.current.getEchartsInstance();
        chartInstance.resize();
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <div className="aspect-[1920/1080] w-full font-red flex justify-center items-center">
        <div className="aspect-[413/280] w-[50%] bg-[lightblue]">
          <ReactECharts
            ref={chartRef}
            option={option}
            style={{ width: "100%", height: "100%" }}
          />
        </div>
      </div>
    </>
  );
}

export default App;

• 每次滚动时调用resize()，强制图表根据容器当前尺寸重新渲染，保持比例稳定

验证效果 #

应用上述任意一种修改后，滚动页面时图表将始终保持413/280的比例，不会出现高度异常。

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