比特币价格走势分析工具

一个现代化的比特币价格分析工具，基于React 18构建，提供了直观美观的价格走势图表和多周期均线指标监控。

✨ 功能特点

📈 专业图表展示

• 高性能价格走势图 - 采用ECharts渲染引擎，支持大量数据流畅展示
• 渐变视觉效果 - 优雅的渐变填充和阴影效果，提升视觉体验
• 平滑曲线 - 平滑的价格和均线展示，清晰展现趋势
• 交互式缩放 - 支持鼠标滚轮和滑块缩放，轻松查看不同时间段
• 十字准星 - 精确查看任意时间点的价格和均线数据

📊 多周期均线指标

支持6种不同周期的移动平均线，帮助识别短期、中期和长期趋势：

• MA50 (50日均线) - 短期趋势指标
• MA200 (200日均线) - 经典中期趋势指标
• MA350 (350日均线) - 中长期趋势指标
• MA700 (700日均线) - 长期趋势指标
• MA1000 (1000日均线) - 超长期趋势指标
• MA1400 (1400日均线) - 极长期趋势指标

📋 均线监控面板

• 实时均线数值 - 显示每条均线的当前精确数值
• 变化率指标 - 显示均线日涨跌幅度，带趋势图标
• 价格对比 - 自动计算当前价格与各均线的偏离度
• 位置提示 - 清晰标识价格在均线上方或下方
• 渐变卡片设计 - 每个均线使用独特颜色，卡片带悬浮效果

📱 响应式设计

• 完美适配桌面、平板和移动设备
• 灵活的网格布局系统
• 优雅的Material-UI组件

🎨 视觉优化

• 渐变标题 - 紫色渐变标题，醒目美观
• 卡片阴影 - 柔和的阴影效果，层次分明
• 悬浮动画 - 卡片悬浮时优雅上升效果
• 色彩系统 - 统一的配色方案，每条均线独特配色
• 深色提示框 - 半透明深色工具提示，信息清晰可读

🛠 技术栈

• React 18 - 最新版本的React框架
• ECharts 5 - 强大的数据可视化图表库
• Material-UI v5 - Google Material Design UI组件库
  • @mui/material - 核心组件
  • @mui/icons-material - 图标组件
• Vite 4 - 新一代前端构建工具，开发体验极佳
• CSV数据 - 支持CSV格式的历史价格数据

📦 安装与运行

环境要求

• Node.js 14+
• npm 或 yarn

安装依赖

npm install

启动开发服务器

npm run dev

开发服务器将在 http://localhost:5173 启动

构建生产版本

npm run build

构建输出将在 dist 目录

预览生产构建

npm run preview

📂 数据格式

项目使用CSV格式存储比特币历史价格数据，位于 public/btc-price.csv

CSV文件格式：

date,price
2024-01-01,42500.00
2024-01-02,43200.00
...

更新价格数据

项目包含Python脚本用于更新比特币价格数据：

cd scripts
python update_btc_price.py

脚本会从CoinGecko API获取最新的比特币价格数据并更新CSV文件。

🎯 使用指南

1. 查看价格图表

• 主图表显示比特币历史价格曲线
• 图表下方有滑块，可以拖动查看不同时间段
• 鼠标悬停在图表上查看具体数值

2. 控制均线显示

• 图表上方有均线开关按钮
• 点击复选框可以显示/隐藏对应的均线
• 每条均线都有独特的颜色

3. 查看均线数据

• 图表下方的监控面板显示所有均线的实时数据
• 每个卡片包含：
  • 均线名称（MA50、MA200等）
  • 当前数值
  • 日涨跌幅
  • 与当前价格的偏离度
  • 位置关系（上方/下方）

4. 底部信息栏

• 当前比特币价格
• 历史数据总点数
• 最新数据日期

🎨 均线颜色方案

均线	颜色	用途
MA50	红色 (#FF6B6B)	短期趋势
MA200	青色 (#4ECDC4)	中期趋势（经典）
MA350	蓝色 (#45B7D1)	中长期趋势
MA700	橙红色 (#FFA07A)	长期趋势
MA1000	薄荷绿 (#98D8C8)	超长期趋势
MA1400	紫色 (#B794F4)	极长期趋势

📊 技术指标说明

移动平均线 (MA)

移动平均线是技术分析中最常用的指标之一，通过计算一定周期内的平均价格来平滑价格波动，帮助识别趋势：

• 金叉 - 短期均线上穿长期均线，通常被视为买入信号
• 死叉 - 短期均线下穿长期均线，通常被视为卖出信号
• 支撑位 - 价格下跌时，均线可能成为支撑
• 压力位 - 价格上涨时，均线可能成为阻力

🔧 自定义配置

修改均线周期

编辑 src/App.jsx 中的 MA_DAYS 数组：

const MA_DAYS = [50, 200, 350, 700, 1000, 1400];

修改均线颜色

编辑 src/App.jsx 中的 MA_COLORS 对象：

const MA_COLORS = {
  50: '#FF6B6B',
  200: '#4ECDC4',
  // ...
};

📝 项目结构

btc-price-viewer/
├── public/
│   └── btc-price.csv          # 比特币历史价格数据
├── src/
│   ├── App.jsx                # 主应用组件
│   └── main.jsx               # 应用入口
├── scripts/
│   └── update_btc_price.py    # 数据更新脚本
├── package.json               # 项目依赖
├── vite.config.js            # Vite配置
└── README.md                 # 项目文档

🚀 性能优化

• 使用Canvas渲染器以获得更好的性能
• 平滑曲线减少数据点
• 响应式设计优化移动端体验
• 懒加载和按需渲染

📄 许可证

本项目仅供学习和研究使用。

🤝 贡献

欢迎提交Issue和Pull Request！

📮 联系方式

如有问题或建议，欢迎通过Issue反馈。

---

注意: 本工具仅供参考，不构成投资建议。加密货币投资有风险，请谨慎决策。