# 价格趋势 Tab 页 - 使用指南

## 📊 功能概述

新增了**价格趋势** Tab 页，提供钢材价格走势的可视化分析功能。

### 主要功能

1. **折线图展示**
   - 自定义绘制的轻量级折线图
   - 支持平滑曲线和区域填充
   - 响应式设计，自动适配屏幕

2. **多维度筛选**
   - 地区选择（支持"全部地区"）
   - 材质选择（支持"全部材质"）
   - 时间范围选择（7天/15天/30天/60天/90天）

3. **统计数据**
   - 起始价格
   - 最新价格
   - 价格变动（涨跌幅）
   - 颜色标识：红色上涨，绿色下跌

## 🎨 界面设计

### 筛选条件区域
- 与首页一致的卡片式设计
- 清晰的表单布局
- 快捷的查询和重置按钮

### 图表展示区域
- **图表卡片**：500rpx 高度的折线图
- **统计摘要**：3 列数据展示
- **渐变填充**：蓝色半透明区域填充
- **数据点标记**：每个数据点都有圆形标记

### 状态展示
- **初始提示**：引导用户进行查询
- **加载状态**：显示加载提示
- **空状态**：无数据时的友好提示

## 📂 文件结构

```
Sale/
├── pages/
│   ├── index/           # 价格查询页
│   │   ├── index.js
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   └── index.json
│   └── trend/           # 价格趋势页（新增）
│       ├── trend.js     # 页面逻辑
│       ├── trend.wxml   # 页面结构
│       ├── trend.wxss   # 页面样式
│       └── trend.json   # 页面配置
├── components/
│   └── ec-canvas/       # 图表组件（新增）
│       ├── ec-canvas.js
│       ├── ec-canvas.json
│       ├── ec-canvas.wxml
│       ├── ec-canvas.wxss
│       ├── echarts.js   # 简化版 ECharts
│       └── wx-canvas.js # Canvas 适配器
├── images/
│   └── README.md        # 图标说明
└── app.json             # 添加了 tabBar 配置
```

## 🔧 技术实现

### 图表绘制
- **Canvas 2D API**：使用微信小程序 Canvas 2D 接口
- **自定义绘制**：无需依赖第三方图表库
- **性能优化**：轻量级实现，渲染流畅

### 数据处理
```javascript
// API 调用
api.getPriceTrend({
  region: '昆明',    // 可选
  material: 'HPB300', // 可选
  days: 30
})

// 返回数据格式
[
  { date: '2026-01-01', avgPrice: 3850 },
  { date: '2026-01-02', avgPrice: 3860 },
  ...
]
```

### 图表特性
- ✅ X 轴：日期标签（斜向显示）
- ✅ Y 轴：价格刻度（带 ¥ 符号）
- ✅ 网格线：水平参考线
- ✅ 区域填充：渐变色背景
- ✅ 数据点：圆形标记点
- ✅ 平滑曲线：贝塞尔曲线

## 🎯 使用方法

### 1. 切换到价格趋势页
点击底部 TabBar 的"价格趋势"按钮

### 2. 设置筛选条件（可选）
- 选择地区：默认"全部地区"
- 选择材质：默认"全部材质"
- 选择时间范围：默认"最近 30 天"

### 3. 查询趋势
点击"查询趋势"按钮，等待数据加载

### 4. 查看图表
- **折线图**：查看价格走势
- **统计卡片**：查看价格变动情况
- **起始价格**：时间段首日的平均价格
- **最新价格**：时间段末日的平均价格
- **价格变动**：最新价 - 起始价

### 5. 重新查询
- 点击"重置"清空当前图表
- 修改筛选条件后再次查询

## 📊 数据统计

### 示例数据
```
起始价格：¥3850
最新价格：¥3900
价格变动：+50
```

### 颜色含义
- 🔴 **红色**（+50）：价格上涨
- 🟢 **绿色**（-50）：价格下跌

## ⚙️ 配置说明

### 修改时间范围选项
编辑 `pages/trend/trend.js` 中的 `dayRanges` 数组：

```javascript
dayRanges: [
  { label: '最近 7 天', value: 7 },
  { label: '最近 15 天', value: 15 },
  { label: '最近 30 天', value: 30 },
  { label: '最近 60 天', value: 60 },
  { label: '最近 90 天', value: 90 }
]
```

### 修改图表样式
编辑 `components/ec-canvas/echarts.js` 中的绘制方法：

```javascript
// 修改线条颜色
ctx.strokeStyle = '#1890ff'

// 修改线条宽度
ctx.lineWidth = 3

// 修改区域填充渐变色
gradient.addColorStop(0, 'rgba(24, 144, 255, 0.3)')
gradient.addColorStop(1, 'rgba(24, 144, 255, 0.05)')
```

## 🚀 后续优化建议

### 功能增强
1. **K 线图**：添加开盘价、收盘价、最高价、最低价
2. **多条折线**：同时对比多个地区或材质
3. **数据表格**：提供详细的数据列表
4. **导出功能**：导出图表或数据为 Excel

### 交互优化
1. **缩放功能**：支持手势缩放查看细节
2. **十字准星**：点击显示具体数值
3. **Tooltip**：悬浮显示详细信息
4. **标记点**：标记最高价、最低价

### 性能优化
1. **虚拟滚动**：大量数据时的性能优化
2. **数据缓存**：减少重复请求
3. **图表懒加载**：进入页面才加载

## 📝 注意事项

1. **API 限制**
   - 确保 `/api/prices/trend` 接口正常工作
   - 检查返回数据格式是否正确

2. **Canvas 兼容性**
   - 使用 Canvas 2D 接口（需基础库 2.9.0+）
   - 如需兼容旧版本，使用旧版 Canvas 接口

3. **图标文件**
   - 当前使用文字 TabBar
   - 添加图标需要准备 PNG 文件（81×81px）
   - 参考 `images/README.md` 获取图标

## ✨ 完成状态

- ✅ TabBar 配置
- ✅ 趋势页面创建
- ✅ 筛选条件表单
- ✅ 折线图绘制
- ✅ 统计数据展示
- ✅ 状态处理（加载/空/错误）
- ✅ 样式优化

---

**开发完成时间**：2026-01-06
**状态**：✅ 可用，建议测试后上线