大屏数据展示平台双11活动

import React, { useEffect, useState } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const SalesDashboard = () => {
  const [salesData, setSalesData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/sales');
      const data = await response.json();
      setSalesData(data);
    };

    const intervalId = setInterval(fetchData, 5000); // 每5秒更新一次数据

    return () => clearInterval(intervalId); // 清除定时器
  }, []);

  return (
    <LineChart width={1000} height={300} data={salesData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="time" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="sales" stroke="#8884d8" activeDot={{ r: 8 }} />
    </LineChart>
  );
};

export default SalesDashboard;

from flask import Flask, jsonify
import random

app = Flask(__name__)

@app.route('/api/sales', methods=['GET'])
def get_sales_data():
    # 模拟实时数据生成
    data = {
        'time': new Date(),
        'sales': random.randint(1000, 5000)
    }
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)