[根目录](../../CLAUDE.md) > [pages](../) > **trend**

---

# pages/trend - 价格趋势页

> **模块状态**: ✅ 已完成
>
> **最后更新**: 2026-01-07 09:16:32

---

## 变更记录 (Changelog)

### 2026-01-07 09:16:32
- 重新生成模块文档
- 补充 ECharts 图表集成说明
- 添加数据流与状态管理说明

### 2026-01-06
- 完成价格趋势页面开发
- 集成 ECharts 图表组件
- 实现多维度筛选功能
- 添加统计数据展示

---

## 模块职责

**trend** 是价格趋势分析页面，负责：

1. **趋势图表展示**：使用 ECharts 绘制价格走势折线图
2. **多维度筛选**：支持地区、材质、时间范围的组合查询
3. **数据统计**：显示起始价格、最新价格、价格变动
4. **可视化交互**：平滑曲线、区域填充、响应式图表

---

## 入口与启动

### 页面路径
- **注册路径**：`pages/trend/trend`（在 `app.json` 中注册）
- **物理路径**：`pages/trend/trend.js`
- **访问方式**：通过 TabBar 导航或页面跳转

### 页面配置
```json
{
  "navigationBarTitleText": "价格趋势",
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
```

### 生命周期
```javascript
Page({
  onLoad(options) { },      // 页面加载，初始化图表
  onReady() { },            // 页面初次渲染完成
  onShow() { }              // 页面显示
})
```

---

## 对外接口

### 页面跳转接口
```javascript
// 从价格查询页跳转
wx.navigateTo({
  url: '/pages/trend/trend'
})
```

### TabBar 切换
```javascript
onTabChange(e) {
  const tabIndex = parseInt(e.detail.value)
  if (tabIndex === 0) {
    wx.navigateTo({ url: '/pages/index/index' })
  }
}
```

---

## 关键依赖与配置

### 依赖文件
| 文件 | 用途 |
|------|------|
| `trend.js` | 页面逻辑（270 行） |
| `trend.wxml` | 页面结构 |
| `trend.wxss` | 页面样式 |
| `trend.json` | 页面配置 |

### 外部依赖
- **API 封装**：`utils/request.js`
- **图表组件**：`components/ec-canvas/ec-canvas`
- **图表库**：`components/ec-canvas/echarts.js`

### 配置项
```javascript
// 地区选项
regions: ['全部', '昆明', '玉溪', '楚雄', '大理', ...]

// 材质选项
materials: ['全部', 'HPB300', 'HRB400', 'HRB400E', ...]

// 时间范围选项
dayRanges: [
  { label: '最近 7 天', value: 7 },
  { label: '最近 15 天', value: 15 },
  { label: '最近 30 天', value: 30 },
  ...
]
```

---

## 数据模型

### 页面数据结构
```javascript
data: {
  // 筛选条件
  regions: [],           // 地区选项
  materials: [],         // 材质选项
  dayRanges: [],         // 时间范围选项
  selectedRegionIndex: 0,
  selectedMaterialIndex: 0,
  selectedDayIndex: 2,

  // 状态
  loading: false,        // 加载状态
  searched: false,       // 是否已搜索
  hasData: false,        // 是否有数据

  // 图表实例
  ec: {
    onInit: null         // 图表初始化函数
  },

  // 趋势数据
  trendData: {
    dates: [],           // 日期数组
    prices: []           // 价格数组
  },

  // 统计数据
  startPrice: '-',       // 起始价格
  endPrice: '-',         // 最新价格
  priceChange: '-'       // 价格变动
}
```

### API 返回数据格式
```javascript
// GET /api/prices/trend
[
  { date: '2026-01-01', avgPrice: 3850 },
  { date: '2026-01-02', avgPrice: 3860 },
  ...
]
```

---

## 核心功能实现

### 1. 图表初始化
```javascript
initChart(canvas, width, height, res) {
  const chartInstance = echarts.init(canvas)

  const option = {
    xAxis: {
      type: 'category',
      data: this.data.trendData.dates
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: this.data.trendData.prices,
      type: 'line',
      smooth: true,      // 平滑曲线
      areaStyle: {}      // 区域填充
    }]
  }

  chartInstance.setOption(option)
  return chartInstance
}
```

### 2. 趋势查询
```javascript
async onQuery() {
  const { region, material, days } = this.getQueryParams()

  this.setData({ loading: true })

  try {
    const result = await api.getPriceTrend({ region, material, days })

    const dates = result.data.map(item => {
      const date = new Date(item.date)
      return `${date.getMonth() + 1}/${date.getDate()}`
    })
    const prices = result.data.map(item => item.avgPrice)

    // 计算统计
    const startPrice = prices[0]
    const endPrice = prices[prices.length - 1]
    const priceChange = endPrice - startPrice

    this.setData({
      trendData: { dates, prices },
      startPrice,
      endPrice,
      priceChange,
      hasData: true,
      loading: false
    })
  } catch (error) {
    // 错误处理
  }
}
```

### 3. TabBar 导航
```javascript
onTabChange(e) {
  const value = parseInt(e.detail.value)

  if (value === 0) {
    // 跳转到价格查询页
    wx.navigateTo({
      url: '/pages/index/index'
    })
  }
}
```

---

## UI 组件结构

### WXML 结构
```xml
<view class="container">
  <!-- 筛选条件区域 -->
  <view class="filter-section">
    <!-- 地区选择 -->
    <!-- 材质选择 -->
    <!-- 时间范围选择 -->
    <!-- 查询按钮 -->
  </view>

  <!-- 图表展示区域 -->
  <view class="chart-section" wx:if="{{hasData}}">
    <ec-canvas ec="{{ ec }}"></ec-canvas>

    <!-- 统计摘要 -->
    <view class="stats-summary">
      <view class="stat-item">起始价格</view>
      <view class="stat-item">最新价格</view>
      <view class="stat-item">价格变动</view>
    </view>
  </view>

  <!-- 欢迎提示 -->
  <view class="welcome-section" wx:if="{{!hasData && !loading}}">
    <!-- 引导文案 -->
  </view>

  <!-- TabBar -->
  <t-tab-bar value="1" bindchange="onTabChange">
    <t-tab-bar-item value="0" label="价格查询" />
    <t-tab-bar-item value="1" label="价格趋势" />
  </t-tab-bar>
</view>
```

---

## 测试与质量

### 测试覆盖
- **手动测试**：已在微信开发者工具中验证
- **图表渲染**：ECharts 图表正常显示
- **数据统计**：价格变动计算正确

### 测试要点
1. **筛选条件**：验证地区、材质、时间范围选择
2. **图表渲染**：验证折线图、坐标轴、数据点
3. **统计数据**：验证起始价、最新价、变动值
4. **空状态**：无数据时提示友好
5. **加载状态**：查询中显示加载提示
6. **错误处理**：网络异常时提示用户

### 已知问题
- 图表在真机上可能存在性能问题（数据量大时）
- 时间范围选择器不支持自定义日期

---

## 常见问题 (FAQ)

### Q: 图表不显示怎么办？

**A**: 检查以下几点：
1. 确保 `ec-canvas` 组件已正确引入
2. 检查 `trendData` 数据是否已更新
3. 确认图表初始化函数 `initChart` 被正确调用
4. 查看控制台是否有错误信息

### Q: 如何修改图表样式？

**A**: 编辑 `initChart` 方法中的 `option` 配置：
```javascript
const option = {
  xAxis: { ... },
  yAxis: { ... },
  series: [{
    smooth: true,      // 平滑曲线
    lineStyle: {
      color: '#1890ff', // 线条颜色
      width: 3          // 线条宽度
    },
    areaStyle: {
      color: 'rgba(24, 144, 255, 0.3)' // 填充颜色
    }
  }]
}
```

### Q: 如何添加更多的时间范围选项？

**A**: 编辑 `dayRanges` 数组：
```javascript
dayRanges: [
  { label: '最近 7 天', value: 7 },
  { label: '最近 30 天', value: 30 },
  { label: '最近 90 天', value: 90 },
  { label: '最近 180 天', value: 180 },  // 新增
  { label: '最近 365 天', value: 365 }   // 新增
]
```

### Q: 如何导出图表数据？

**A**: 添加导出按钮：
```javascript
onExport() {
  const { trendData } = this.data
  const csvContent = this.convertToCSV(trendData)

  wx.showToast({
    title: '导出功能开发中',
    icon: 'none'
  })
}
```

---

## 相关文件清单

```
pages/trend/
├── trend.js        # 页面逻辑（270 行）
├── trend.wxml      # 页面结构（128 行）
├── trend.wxss      # 页面样式
├── trend.json      # 页面配置
└── CLAUDE.md       # 本文档
```

---

## 下一步建议

### 功能增强
1. **数据交互**
   - 点击数据点显示详细信息
   - 十字准星显示数值
   - 缩放功能查看细节

2. **图表增强**
   - 支持多条折线对比
   - 添加 K 线图
   - 添加标记点（最高价、最低价）

3. **数据导出**
   - 导出图表为图片
   - 导出数据为 Excel

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

---

**模块状态**: ✅ 已完成
**优先级**: 高（核心功能）
**预估工作量**: 已完成
**相关模块**: [pages/index](../index/CLAUDE.md) | [components/ec-canvas](../../components/ec-canvas/CLAUDE.md) | [utils/request](../../utils/request.md)