当前位置：首页 > React

node react 实现大屏

2026-01-27 13:50:05React

使用 Node.js 和 React 实现大屏展示

技术栈选择

Node.js 作为后端服务，提供数据接口和静态资源托管。React 作为前端框架，结合 ECharts 或 D3.js 实现数据可视化。Ant Design 或 Material-UI 提供 UI 组件支持。

项目初始化

通过 Create React App 快速搭建前端项目：

npx create-react-app dashboard-frontend
cd dashboard-frontend

安装必要依赖：

npm install echarts axios antd react-router-dom

后端使用 Express 框架：

mkdir dashboard-backend
cd dashboard-backend
npm init -y
npm install express cors body-parser

后端数据接口开发

创建 server.js 文件：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.get('/api/data', (req, res) => {
  res.json({
    sales: [120, 200, 150, 80, 70, 110, 130],
    users: [100, 120, 140, 160, 180, 200, 220]
  });
});

app.listen(3001, () => console.log('Server running on port 3001'));

前端大屏开发

在 React 组件中使用 ECharts：

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

function Dashboard() {
  useEffect(() => {
    axios.get('http://localhost:3001/api/data').then(res => {
      const chart = echarts.init(document.getElementById('chart'));
      chart.setOption({
        title: { text: '销售数据大屏' },
        tooltip: {},
        xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: {},
        series: [
          { name: '销量', type: 'bar', data: res.data.sales },
          { name: '用户', type: 'line', data: res.data.users }
        ]
      });
    });
  }, []);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <div id="chart" style={{ width: '100%', height: '80%' }}></div>
    </div>
  );
}

响应式布局处理

使用 CSS Grid 或 Flexbox 实现自适应布局：

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

数据实时更新

通过 WebSocket 或定时轮询实现数据刷新：

useEffect(() => {
  const timer = setInterval(() => {
    axios.get('/api/data').then(updateChart);
  }, 5000);
  return () => clearInterval(timer);
}, []);

性能优化

对于大数据量渲染：

使用 ECharts 的数据采样功能
实现虚拟滚动技术
启用 WebWorker 处理复杂计算

部署方案

前端打包：npm run build

后端服务静态文件：

app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
});