28.3 可视化大屏：自适应布局、图表组件封装

可视化大屏是前端开发中一个特殊且常见的场景，通常用于数据监控、业务展示、指挥中心等。它对界面有两个核心诉求：一是完美适配各种尺寸的屏幕，二是高效复用图表组件。本节将从这两个维度展开，给出可直接落地的实践方案。

自适应布局方案

大屏的分辨率极为多样，从 1920×1080 的常规屏幕到 3840×2160 的 4K 屏，甚至超宽拼接屏。如果使用固定像素开发，在不同屏幕上会出现留白或溢出。因此，我们需要一套等比缩放的策略，让页面在任何尺寸下都能完整显示、不变形。

核心思路： 以大屏设计稿（通常 1920×1080）为基准，计算当前窗口宽度和高度的缩放比例，选择较小的比例（保证内容不溢出），通过 CSS transform 的 scale 对根容器进行缩放，并配合 transform-origin: left top 保持左上角对齐。

自适应 Hook 封装：

import { useState, useEffect } from 'react';

function useScale(ref, designWidth = 1920, designHeight = 1080) {
  const [scale, setScale] = useState(1);

  const handleResize = () => {
    if (!ref.current) return;
    const clientWidth = document.documentElement.clientWidth;
    const clientHeight = document.documentElement.clientHeight;
    const scaleX = clientWidth / designWidth;
    const scaleY = clientHeight / designHeight;
    setScale(Math.min(scaleX, scaleY));
  };

  useEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return scale;
}

export default useScale;

在页面根组件中使用：

function FullScreenContainer({ children }) {
  const containerRef = useRef(null);
  const scale = useScale(containerRef, 1920, 1080);

  return (
    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden', background: '#000' }}>
      <div
        ref={containerRef}
        style={{
          width: 1920,
          height: 1080,
          transform: `scale(${scale})`,
          transformOrigin: 'left top',
          position: 'relative',
        }}
      >
        {children}
      </div>
    </div>
  );
}

这样，所有子元素都可以按照 1920×1080 的固定像素进行布局和定位，而不必担心实际屏幕尺寸差异。需要注意，useScale 监听了 resize 事件，如果大屏环境中窗口尺寸固定（如全屏展示），可以移除监听。

额外处理：

如果存在需要独立滚动的局部列表（如表格），应避免在缩放容器上使用 overflow: hidden 导致的裁剪问题，可单独处理该列表区域的内部滚动。
字体大小会随缩放一同变化，无需额外处理，但极简线条字体可能在高缩放比下过于纤细，此时可考虑使用 rem 并动态设置根字体大小。

图表组件封装

可视化大屏的核心内容是数据图表，基于 ECharts 是最常见的选择。为了在多个大屏项目中复用，我们需要封装一个通用图表组件，它具备以下能力：

接收图表配置（options），自动初始化 ECharts 实例
支持窗口尺寸变化时自适应
监听数据变化，按需更新图表（而不是每次重渲染都销毁重建）
暴露实例引用，方便调用 ECharts 的 API（如 dispatchAction）

封装一个 Chart 组件：

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

function Chart({ option, style, className, onChartReady }) {
  const chartRef = useRef(null);
  const instanceRef = useRef(null);

  useEffect(() => {
    // 初始化
    if (!instanceRef.current && chartRef.current) {
      instanceRef.current = echarts.init(chartRef.current);
      onChartReady?.(instanceRef.current);
    }

    // 设置或更新配置
    if (option && instanceRef.current) {
      instanceRef.current.setOption(option, true); // notMerge: true 清除旧配置
    }
  }, [option]);

  // 监听 resize
  useEffect(() => {
    const handleResize = () => {
      instanceRef.current?.resize();
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 组件卸载时销毁实例
  useEffect(() => {
    return () => {
      instanceRef.current?.dispose();
      instanceRef.current = null;
    };
  }, []);

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

export default Chart;

使用示例：

function SalesTrend() {
  const [option, setOption] = useState({
    title: { text: '销售趋势' },
    xAxis: { type: 'category', data: [] },
    yAxis: { type: 'value' },
    series: [{ data: [], type: 'line' }],
  });

  useEffect(() => {
    fetchData().then(data => {
      setOption(prev => ({
        ...prev,
        xAxis: { ...prev.xAxis, data: data.months },
        series: [{ ...prev.series[0], data: data.values }],
      }));
    });
  }, []);

  return (
    <div style={{ width: '100%', height: 400 }}>
      <Chart option={option} />
    </div>
  );
}

关键点说明：

setOption 的第二个参数 true 表示 notMerge，即完全替换之前的配置，可以避免旧配置残留导致的问题。如果需要增量更新（比如只更新 series 数据），可以设为 false 或不传，但要注意配置合并规则。
echarts.init 只在第一次渲染时执行，后续通过 setOption 更新，避免反复创建销毁实例导致性能浪费。
在 resize 事件中调用 instance.resize() 确保图表尺寸正确响应容器变化。对于上面提到的 useScale 缩放容器，resize 事件同样有效，因为缩放后的容器尺寸会被 ECharts 正确识别。

更进一步的封装：按图表类型定制

在真实大屏项目中，通常会按图表类型封装一组组件：BarChart、LineChart、PieChart、GaugeChart 等。它们内部复用同一个 Chart 组件，但对外暴露简化的 API，降低使用门槛。

function PieChart({ data, title }) {
  const option = useMemo(() => ({
    title: { text: title, left: 'center' },
    series: [{
      type: 'pie',
      data,
      radius: ['40%', '70%'],
    }],
  }), [data, title]);

  return <Chart option={option} />;
}

这样一来，业务开发者只需关心数据格式，无需手写复杂的 ECharts 配置。

实际大屏开发中的其他注意点

节流与渲染优化：大屏通常同时展示多个图表，且数据刷新频率可能较高。应在数据请求层使用节流，避免短时间内触发大量 setOption 导致卡顿。
动效控制：大屏经常需要自动轮播或动效，建议用 useInterval 钩子统一管理，离开页面时停止。
地图与 3D 图表：ECharts 的地图需要额外引入 GeoJSON 或使用第三方地图服务，注意资源体积和加载延迟。
主题定制：为统一视觉效果，可以注册 ECharts 主题或通过 option 中的 color 等属性定制色调。

可视化大屏的开发不仅考验前端的基础能力，还要求开发者对数据刷新、性能优化、布局适配有一套标准化流程。通过上述的自适应容器和图表组件封装，可以搭建一个坚实的底座，让后续的业务迭代变得更加轻松。