基于 React + autofit.js 打造的全屏自适应数据可视化大屏系统

---

📌 系统概述

智慧水利态势感知系统 是一套专为水利防汛设计的实时监控与数据可视化平台。系统采用现代化的前端技术栈，结合智能自适应方案，能够在任意分辨率的大屏设备上完美呈现，为水利防汛指挥提供全方位的数据支撑。

🎯 核心特性

• ✅ 全屏自适应：基于 autofit.js 实现任意屏幕完美适配
• ✅ 实时数据监控：天气、降雨、河道水情实时更新
• ✅ 地理信息可视化：河南省地图 + 区域预警标注
• ✅ 交互式图表：ECharts 驱动的多维度数据展示
• ✅ 响应式布局：左中右三栏式科技感界面
• ✅ 动态视觉效果：渐变、光晕、动画营造沉浸体验

---

🎨 界面布局设计

系统采用经典的三栏式大屏布局，设计分辨率为 1920×1080px：

┌─────────────────────────────────────────────────────────┐
│                    智慧水利态势感知系统                     │  ← 头部导航
├──────────┬──────────────────────────┬──────────┤
│          │                          │          │
│  左侧面板 │      中心地图可视化       │  右侧面板  │
│          │                          │          │
│ 实时天气  │    河南省地图 + 预警面板   │ 河道水情  │
│ 降雨监控  │                          │ 水位变化  │
│ 降雨统计  │    底部模式切换控制       │ 趋势图表  │
│          │                          │          │
└──────────┴──────────────────────────┴──────────┘

区域功能划分

区域	宽度占比	主要功能
左侧面板	25%	实时天气情况、实时降雨情况、降雨统计
中心区域	50%	河南省地图、暴风雨预警、模式切换
右侧面板	25%	河道实时水情、水情变化、水位趋势

---

🛠️ 技术架构

核心技术栈

{
  "前端框架": "React 19.2.3",
  "构建工具": "Vite 7.2.4",
  "UI框架": "Tailwind CSS 4.1.17",
  "图表库": "ECharts 6.0.0 + echarts-for-react",
  "自适应方案": "autofit.js 3.2.8",
  "时间处理": "Day.js 1.11.19",
  "类型支持": "TypeScript 5.9.3",
  "图标库": "lucide-react 0.575.0"
}

项目结构

dashboard-autofit-setup/
├── src/
│   ├── components/          # 组件目录
│   │   ├── ui/             
│   │   │   └── Panel.tsx   # 通用面板容器
│   │   ├── Header.tsx      # 顶部导航栏
│   │   ├── LeftPanel.tsx   # 左侧数据面板
│   │   ├── CenterMap.tsx   # 中心地图区域
│   │   └── RightPanel.tsx  # 右侧数据面板
│   ├── hooks/              # 自定义 Hooks
│   │   ├── useData.ts      # 数据获取 Hook
│   │   └── useTime.ts      # 实时时间 Hook
│   ├── api/                # API 接口层
│   │   ├── index.ts        # API 统一导出
│   │   └── mock/          
│   │       └── data.ts     # Mock 数据
│   ├── utils/              # 工具函数
│   │   └── cn.ts           # 类名合并工具
│   ├── assets/             # 静态资源
│   ├── App.tsx             # 根组件
│   ├── autofit.d.ts        # autofit.js 类型声明
│   └── index.css           # 全局样式
└── package.json

---

🎯 核心功能详解

1️⃣ 全屏自适应解决方案

技术原理

系统采用 autofit.js 作为核心自适应引擎，通过 CSS3 Transform Scale 实现等比例缩放：

关键配置代码：

// App.tsx
useEffect(() => {
  autofit.init({
    dw: 1920,        // 设计稿宽度
    dh: 1080,        // 设计稿高度
    el: '.dashboard', // 缩放目标元素
    resize: true,     // 监听窗口变化
  });

  return () => {
    autofit.off();
  };
}, []);

CSS 样式支持：

/* index.css */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard {
  transform-origin: center center;
  width: 1920px;
  height: 1080px;
}

工作流程

1. 页面加载 → autofit.js 获取窗口尺寸
2. 计算缩放比例 = min(窗口宽/1920, 窗口高/1080)
3. 对 .dashboard 应用 transform: scale(比例)
4. 监听窗口 resize 事件，动态调整

适配效果

• ✅ 支持 1366×768 到 4K 任意分辨率
• ✅ 保持 16:9 宽高比不变形
• ✅ 自动居中对齐，始终撑满屏幕
• ✅ 无需编写媒体查询代码

---

2️⃣ 实时天气与降雨监控

功能模块

左侧面板 - 实时天气情况

<Panel title="实时天气情况">
  {/* 实时时间 + 天气状态 */}
  <div className="flex justify-between">
    <div>
      <Clock /> 实时时间
      {time} {date}
    </div>
    <div>
      <CloudRain /> 实时天气
      {weather.weather} {weather.temp}
    </div>
  </div>
  
  {/* 降雨概率趋势图 */}
  <ReactECharts option={rainProbOption} />
</Panel>

数据展示：

• 📍 实时时钟（基于 Day.js 每秒更新）
• 🌡️ 温度范围：17~28°C
• ☀️ 天气状态：晴/多云/雨
• 📊 24小时降雨概率曲线图

---

左侧面板 - 实时降雨情况

<Panel title="实时降雨情况">
  {/* 累计降雨量数据 */}
  <div className="flex space-x-6">
    <div>当日累计降雨量: {rainfall.daily} mm</div>
    <div>近3日累计降雨量: {rainfall.threeDay} mm</div>
  </div>
  
  {/* 逐小时降雨量柱状图 */}
  <ReactECharts option={rainfallHoursOption} />
</Panel>

技术亮点：

• 📈 ECharts 渐变色柱状图
• 🔄 自动刷新数据（通过 useData Hook）
• 🎨 动态高亮当前时段

---

左侧面板 - 降雨统计

展示各行政区划的降雨数据表格，支持：

• 📋 当日/三日/当月降雨量对比
• 🔀 可切换流域、水库维度
• 📜 虚拟滚动加载（处理大量数据）

---

3️⃣ 地理信息可视化

河南省地图

数据来源： DataV.GeoAtlas（阿里云地理数据服务）

// CenterMap.tsx
useEffect(() => {
  fetch('https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json')
    .then(res => res.json())
    .then(data => {
      echarts.registerMap('henan', data);
      setGeoJson(data);
    });
}, []);

地图特性：

• 🗺️ 支持缩放、拖拽交互
• 📍 标注重点城市降雨量
• ✨ 特效散点标记高风险区域
• 🌊 动态波纹效果（effectScatter）

暴风雨预警面板

叠加在地图左下角的实时预警卡片：

<div className="absolute left-[6%] bottom-[10%] panel-bg">
  <div className="title">
    🌧️ 暴风雨预警
    <span className="orange-alert">Ⅲ级橙色预警</span>
  </div>
  
  <div className="content">
    <div>预警区域: 郑州 · 南阳市</div>
    <div>1小时最大雨强: 48mm</div>
    <div>未来3小时累计: 96mm</div>
    <div>风险上升: ▲ 32%</div>
    
    {/* 微型趋势柱状图 */}
    <div className="mini-chart">
      {[18, 26, 32, 40, 48, 38].map(v => (
        <div className="bar" style={{height: `${v/52*22}px`}} />
      ))}
    </div>
    
    <button>预案详情</button>
  </div>
</div>

设计亮点：

• 🎯 橙色预警级别标识
• 📊 实时数据大字号突出
• 📈 渐变柱状图可视化趋势
• 💡 操作建议 + 预案链接

---

4️⃣ 河道水情监控

右侧面板 - 河道实时水情

7列数据表格展示各站点详细信息：

站点	实时水位	实时雨量	设防水位	防洪高水位	警戒水位	保证水位
伊洛河	40m	20m	20m	20m	20m	20m
卫河	60m	20m	20m	20m	20m	20m

颜色标识：

• 🟢 实时水位：青色加粗
• 🟡 警戒水位：黄色
• 🔴 保证水位：红色

---

右侧面板 - 河道水情变化

对比上一时段的水位变化：

{riverChanges.map(item => (
  <div className="grid-cols-4">
    <div>{item.station}</div>
    <div>{item.realtime}</div>
    <div>{item.previous}</div>
    <div>
      {item.trend === 'up' ? 
        <ArrowUp className="text-red-500" /> : 
        <ArrowDown className="text-green-500" />
      }
      {item.change}
    </div>
  </div>
))}

交互体验：

• ⬆️ 上升趋势：红色箭头
• ⬇️ 下降趋势：绿色箭头
• 🔄 Hover 高亮当前行

---

右侧面板 - 水位实时变化趋势

折线图可视化：

series: [{
  type: 'line',
  smooth: true,
  data: waterTrends.data,
  markLine: {
    data: [
      { yAxis: waterTrends.safe, label: '保证水位' },
      { yAxis: waterTrends.warning, label: '警戒水位' }
    ]
  }
}]

技术细节：

• 📏 警戒/保证水位标线
• 🎨 渐变填充区域
• 🔍 Tooltip 悬浮提示
• 📊 支持流域切换（下拉选择器）

---

5️⃣ 自定义 Hooks 设计

useTime - 实时时钟

// hooks/useTime.ts
export function useTime() {
  const [time, setTime] = useState('');
  const [date, setDate] = useState('');

  useEffect(() => {
    const timer = setInterval(() => {
      const now = dayjs();
      setTime(now.format('HH:mm:ss'));
      setDate(now.format('YYYY-MM-DD dddd'));
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return { time, date };
}

应用场景：

• 头部导航栏右侧时间显示
• 左侧天气面板实时时钟

---

useData - 数据获取与缓存

// hooks/useData.ts
export function useData<T>(
  fetcher: () => Promise<T>, 
  initialData: T
) {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetcher()
      .then(setData)
      .finally(() => setLoading(false));
  }, []);

  return { data, loading };
}

使用示例：

const { data: weather } = useData(
  () => getWeatherData(), 
  { temp: '', weather: '', rainProb: [] }
);

---

6️⃣ 响应式图表处理

ECharts 自适应问题

问题： autofit.js 的 transform: scale() 会导致 ECharts 图表内部不感知真实容器尺寸。

解决方案：

// CenterMap.tsx
useEffect(() => {
  const handleResize = () => {
    setTimeout(() => {
      if (chartRef.current) {
        const chart = chartRef.current.getEchartsInstance();
        chart?.resize();
      }
    }, 100);
  };

  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化时调用

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

关键点：

• ⏱️ 延迟 100ms 确保 transform 完成
• 📐 手动调用 chart.resize() 更新尺寸
• 🔄 监听 window resize 事件

---

🎨 视觉设计系统

色彩方案

:root {
  --color-primary: #00ffcc;        /* 主题青色 */
  --color-primary-dark: #00b38f;   /* 深青色 */
  --color-bg-dark: #020b18;        /* 深蓝黑背景 */
  --color-bg-panel: rgba(2,16,32,0.7); /* 面板半透明 */
  --color-border: #00e5ff;         /* 边框青色 */
}

视觉特效

1. 面板样式

.panel-bg {
  background: linear-gradient(
    180deg, 
    rgba(3,26,45,0.8) 0%, 
    rgba(2,14,25,0.8) 100%
  );
  border: 1px solid rgba(0,229,255,0.3);
  box-shadow: inset 0 0 20px rgba(0,229,255,0.1);
}

2. 渐变文字

.text-gradient {
  background: linear-gradient(180deg, #ffffff 0%, #00e5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. 光晕背景

<div className="absolute inset-0">
  <div className="w-[800px] h-[800px] bg-[radial-gradient(
    circle_at_center,
    rgba(0,229,255,0.1)_0,
    transparent_60%
  )]" />
</div>

---

📦 部署与优化

构建配置

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

生产构建

# 安装依赖
npm install

# 开发环境运行
npm run dev

# 生产构建（输出到 dist 目录）
npm run build

# 预览生产构建
npm run preview

性能优化建议

1. 代码分割

   • Vite 自动进行 chunk 分割
   • React 组件懒加载（React.lazy）

2. 图片资源

   • 使用 WebP 格式
   • 压缩静态资源

3. ECharts 按需加载

   import { LineChart, BarChart } from 'echarts/charts';
   import { GridComponent } from 'echarts/components';
   echarts.use([LineChart, BarChart, GridComponent]);
   

4. 数据请求优化

   • 实现请求缓存
   • 增量数据更新
   • WebSocket 实时推送

---

🚀 扩展方向

功能增强

• 多屏联动：支持多大屏同步显示
• 历史数据回放：时间轴拖拽查看历史
• 告警推送：WebSocket 实时预警通知
• 3D 地形：Three.js 立体地形可视化
• AI 预测：机器学习预测降雨趋势

技术升级

• TypeScript 完善：增强类型安全
• 单元测试：Vitest 测试覆盖
• Docker 部署：容器化部署方案
• 微前端改造：qiankun/Module Federation
• 性能监控：接入 Sentry/性能埋点

---

💡 技术亮点总结

技术点	实现方案	优势
屏幕自适应	autofit.js	零配置、高性能、兼容性强
数据可视化	ECharts	功能强大、交互丰富、文档完善
状态管理	React Hooks	轻量级、易维护、TypeScript 友好
样式方案	Tailwind CSS	原子化、响应式、开发效率高
构建工具	Vite	快速启动、热更新、现代化
时间处理	Day.js	轻量级、国际化、链式调用

---

📚 参考资料

• autofit.js 官方文档
• ECharts 配置手册
• Tailwind CSS 文档
• React 官方文档
• DataV.GeoAtlas

---

👨‍💻 开发者信息

项目名称： 智慧水利态势感知系统
技术栈： React + TypeScript + Vite + autofit.js
设计分辨率： 1920×1080
开发时间： 2026年

---

🎉 结语

本系统综合运用了现代前端技术，实现了高性能、强交互、全适配的数据可视化大屏解决方案。通过 autofit.js 自适应引擎，完美解决了传统大屏开发中的分辨率适配难题，为水利防汛指挥提供了强有力的技术支撑。

核心价值：

• ✅ 开箱即用的自适应方案
• ✅ 模块化组件设计易于维护
• ✅ 丰富的视觉效果提升体验
• ✅ 完整的技术栈可复用性强

希望这套系统能够为智慧水利建设贡献一份力量！🚀

---

我放在公众号（柳杉前端） 回复 智慧水利态势感知大屏 获取源码