218 lines
5.6 KiB
Markdown
218 lines
5.6 KiB
Markdown
# 价格趋势 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
|
||
**状态**：✅ 可用，建议测试后上线
|