guest/steel_prices_service

Fork 0

Files

ECRZ da4a055c1c modify：新增小程序

2026-01-06 18:00:43 +08:00

5.6 KiB

Raw Permalink Blame History

价格趋势 Tab 页 - 使用指南

📊 功能概述

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

主要功能

折线图展示
- 自定义绘制的轻量级折线图
- 支持平滑曲线和区域填充
- 响应式设计，自动适配屏幕
多维度筛选
- 地区选择（支持"全部地区"）
- 材质选择（支持"全部材质"）
- 时间范围选择（7天/15天/30天/60天/90天）
统计数据
- 起始价格
- 最新价格
- 价格变动（涨跌幅）
- 颜色标识：红色上涨，绿色下跌

🎨 界面设计

筛选条件区域

与首页一致的卡片式设计
清晰的表单布局
快捷的查询和重置按钮

图表展示区域

图表卡片：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 接口
自定义绘制：无需依赖第三方图表库
性能优化：轻量级实现，渲染流畅

数据处理

// 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 数组：

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 中的绘制方法：

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

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

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

🚀 后续优化建议

功能增强

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

交互优化

缩放功能：支持手势缩放查看细节
十字准星：点击显示具体数值
Tooltip：悬浮显示详细信息
标记点：标记最高价、最低价

性能优化

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

📝 注意事项

API 限制
- 确保 /api/prices/trend 接口正常工作
- 检查返回数据格式是否正确
Canvas 兼容性
- 使用 Canvas 2D 接口（需基础库 2.9.0+）
- 如需兼容旧版本，使用旧版 Canvas 接口
图标文件
- 当前使用文字 TabBar
- 添加图标需要准备 PNG 文件（81×81px）
- 参考 images/README.md 获取图标

✨ 完成状态

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

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

5.6 KiB Raw Permalink Blame History Unescape Escape