This investment dashboard deve…

# 美股持仓仪表盘（React + Alpha Vantage）实现指南

一、整体架构

• 技术栈：React 18 + Vite + Recharts（图表）+ Tailwind（样式，可选）
• 结构：单一页面，包含持仓总览卡片、个股列表、走势图三大模块
• 数据流：Alpha Vantage API → 自定义 Hook 封装 → 组件消费

二、API 准备

• 到 [alphavantage.co](https://www.alphavantage.co) 免费注册，获取 API Key
• 免费额度限制：每分钟约 5 次请求、每天约 25 次，10 只股票需注意节流
• 常用接口：
• GLOBAL_QUOTE：单只股票实时报价（延迟约15分钟）
• TIME_SERIES_DAILY：日线历史数据（用于30天走势）

三、核心代码结构

1. 配置持仓列表

```js

const PORTFOLIO = [

{ symbol: "AAPL", name: "苹果", shares: 100, cost: 150 },

{ symbol: "TSLA", name: "特斯拉", shares: 50, cost: 200 },

{ symbol: "NVDA", name: "英伟达", shares: 80, cost: 400 },

// ...其余7只按此格式补充

];

```

2. 数据获取 Hook

```js

function useQuote(symbol) {

const [data, setData] = useState(null);

useEffect(() => {

fetch(https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_KEY)

.then(r => r.json())

.then(d => setData(d["Global Quote"]));

}, [symbol]);

return data;

}

```

• 30天走势用 TIME_SERIES_DAILY&outputsize=compact，取最近约22个交易日
• 限流对策：用队列串行请求、请求间隔200ms以上，或将历史数据缓存到 localStorage（每日更新一次即可）

3. 盈亏计算

• 当前市值 = 现价 × 持股数
• 盈亏 = 市值 − 成本；盈亏率 = 盈亏 ÷ 成本 × 100%
• 总览卡片汇总所有持仓的总市值与总盈亏，红绿配色区分

4. 走势图组件

• Recharts 的 LineChart，X轴日期、Y轴收盘价
• 支持点击列表中某只股票，切换下方显示对应30天走势

四、注意事项

• 实时性：Alpha Vantage 免费版是延迟数据，非真正实时；可设置定时器每1-2分钟轮询，但受额度限制，建议手动刷新或升级付费计划
• 美化建议：涨跌用 ▲▼ 符号、盈亏率带百分比颜色条，提升可读性
• 扩展方向：可加板块分布饼图、股息追踪、Redis/后端代理解决限流

需要我提供完整可运行的代码文件，可以告诉我你的持仓明细。