guest/steel_prices_service

Fork 0

Files

ECRZ 60b5aba7f8 modify：优化

2026-01-07 10:13:21 +08:00

8.7 KiB

Raw Permalink Blame History

根目录 > pages > trend

pages/trend - 价格趋势页

模块状态: ✅ 已完成

最后更新: 2026-01-07 09:16:32

变更记录 (Changelog)

2026-01-07 09:16:32

重新生成模块文档
补充 ECharts 图表集成说明
添加数据流与状态管理说明

2026-01-06

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

模块职责

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

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

入口与启动

页面路径

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

页面配置

{
  "navigationBarTitleText": "价格趋势",
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}

生命周期

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

对外接口

页面跳转接口

// 从价格查询页跳转
wx.navigateTo({
  url: '/pages/trend/trend'
})

TabBar 切换

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

配置项

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

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

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

数据模型

页面数据结构

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 返回数据格式

// GET /api/prices/trend
[
  { date: '2026-01-01', avgPrice: 3850 },
  { date: '2026-01-02', avgPrice: 3860 },
  ...
]

核心功能实现

1. 图表初始化

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. 趋势查询

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 导航

onTabChange(e) {
  const value = parseInt(e.detail.value)

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

UI 组件结构

WXML 结构

<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 图表正常显示
数据统计：价格变动计算正确

测试要点

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

已知问题

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

常见问题 (FAQ)

Q: 图表不显示怎么办？

A: 检查以下几点：

确保 ec-canvas 组件已正确引入
检查 trendData 数据是否已更新
确认图表初始化函数 initChart 被正确调用
查看控制台是否有错误信息

Q: 如何修改图表样式？

A: 编辑 initChart 方法中的 option 配置：

const option = {
  xAxis: { ... },
  yAxis: { ... },
  series: [{
    smooth: true,      // 平滑曲线
    lineStyle: {
      color: '#1890ff', // 线条颜色
      width: 3          // 线条宽度
    },
    areaStyle: {
      color: 'rgba(24, 144, 255, 0.3)' // 填充颜色
    }
  }]
}

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

A: 编辑 dayRanges 数组：

dayRanges: [
  { label: '最近 7 天', value: 7 },
  { label: '最近 30 天', value: 30 },
  { label: '最近 90 天', value: 90 },
  { label: '最近 180 天', value: 180 },  // 新增
  { label: '最近 365 天', value: 365 }   // 新增
]

Q: 如何导出图表数据？

A: 添加导出按钮：

onExport() {
  const { trendData } = this.data
  const csvContent = this.convertToCSV(trendData)

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

下一步建议

功能增强

数据交互
- 点击数据点显示详细信息
- 十字准星显示数值
- 缩放功能查看细节
图表增强
- 支持多条折线对比
- 添加 K 线图
- 添加标记点（最高价、最低价）
数据导出
- 导出图表为图片
- 导出数据为 Excel

性能优化

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

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

8.7 KiB Raw Permalink Blame History Unescape Escape