steel_prices_service/Sale/pages/trend/trend.js

// pages/trend/trend.js
const api = require('../../utils/request')
const echarts = require('../../components/ec-canvas/echarts')

let chart = null

Page({
  data: {
    // 地区选项
    regions: [
      '全部', '昆明', '玉溪', '楚雄', '大理', '曲靖', '红河', '文山',
      '重庆', '成都', '广州', '南宁'
    ],
    // 材质选项
    materials: [
      '全部', 'HPB300', 'HRB400', 'HRB400E', 'HRB500', 'HRB500E',
      'HRB600', 'CRB550', 'Q235', 'Q345', 'Q355'
    ],
    // 时间范围选项
    dayRanges: [
      { label: '最近 7 天', value: 7 },
      { label: '最近 15 天', value: 15 },
      { label: '最近 30 天', value: 30 },
      { label: '最近 60 天', value: 60 },
      { label: '最近 90 天', value: 90 }
    ],
    // 选中的索引
    selectedRegionIndex: 0,
    selectedMaterialIndex: 0,
    selectedDayIndex: 2,
    // 加载和搜索状态
    loading: false,
    searched: false,
    hasData: false,
    // 图表实例
    ec: {
      onInit: null
    },
    // 趋势数据
    trendData: null,
    // 统计数据
    startPrice: '-',
    endPrice: '-',
    priceChange: '-'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 初始化图表
    this.setData({
      ec: {
        onInit: this.initChart.bind(this)
      }
    })
  },

  /**
   * 初始化图表
   */
  initChart(canvas, width, height, res) {
    console.log('initChart 被调用', {
      hasTrendData: !!this.data.trendData,
      dates: this.data.trendData?.dates,
      prices: this.data.trendData?.prices
    })

    if (!this.data.trendData || !this.data.trendData.dates || this.data.trendData.dates.length === 0) {
      console.log('没有趋势数据，跳过图表初始化')
      return null
    }

    // 创建图表实例
    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)
    console.log('图表初始化完成')

    return chartInstance
  },

  /**
   * 地区选择改变
   */
  onRegionChange(e) {
    const index = parseInt(e.detail.value)
    this.setData({
      selectedRegionIndex: index
    })
  },

  /**
   * 材质选择改变
   */
  onMaterialChange(e) {
    const index = parseInt(e.detail.value)
    this.setData({
      selectedMaterialIndex: index
    })
  },

  /**
   * 时间范围选择改变
   */
  onDayRangeChange(e) {
    const index = parseInt(e.detail.value)
    this.setData({
      selectedDayIndex: index
    })
  },

  /**
   * 查询趋势
   */
  async onQuery() {
    const {
      selectedRegionIndex,
      selectedMaterialIndex,
      selectedDayIndex,
      regions,
      materials,
      dayRanges
    } = this.data

    const region = selectedRegionIndex === 0 ? '' : regions[selectedRegionIndex]
    const material = selectedMaterialIndex === 0 ? '' : materials[selectedMaterialIndex]
    const days = dayRanges[selectedDayIndex].value

    // 开始加载
    this.setData({
      loading: true,
      searched: false,
      hasData: false
    })

    try {
      // 获取趋势数据
      const trendResult = await api.getPriceTrend({
        region,
        material,
        days
      })

      console.log('趋势数据:', trendResult)

      const trendData = trendResult.data || []

      if (trendData.length === 0) {
        this.setData({
          loading: false,
          searched: true,
          hasData: false
        })
        api.showError('暂无趋势数据')
        return
      }

      // 处理数据
      const dates = []
      const prices = []

      trendData.forEach(item => {
        const date = new Date(item.date)
        const dateStr = `${date.getMonth() + 1}/${date.getDate()}`
        dates.push(dateStr)
        prices.push(item.avgPrice || item.avg_price || 0)
      })

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

      console.log('准备更新数据和图表', { dates, prices, startPrice, endPrice })

      this.setData({
        trendData: {
          dates,
          prices
        },
        startPrice,
        endPrice,
        priceChange,
        loading: false,
        searched: true,
        hasData: true
      }, () => {
        // setData 回调中重新初始化图表
        console.log('setData 完成，准备重新初始化图表')
        if (chart) {
          chart.clear()
          // 重新调用 initChart
          const canvas = chart.canvas
          if (canvas) {
            chart = this.initChart(canvas, canvas.width, canvas.height)
          }
        }
      })

    } catch (error) {
      console.error('查询趋势失败:', error)
      this.setData({
        loading: false,
        searched: true,
        hasData: false
      })
    }
  },

  /**
   * 重置
   */
  onReset() {
    this.setData({
      selectedRegionIndex: 0,
      selectedMaterialIndex: 0,
      selectedDayIndex: 2,
      searched: false,
      hasData: false,
      trendData: null,
      startPrice: '-',
      endPrice: '-',
      priceChange: '-'
    })

    if (chart) {
      chart.clear()
    }
  },

  /**
   * TabBar 切换
   */
  onTabChange(e) {
    const value = e.detail.value
    console.log('TabBar 切换:', value, '类型:', typeof value)

    // value 可能是字符串或数字,统一处理
    const tabIndex = parseInt(value)

    if (tabIndex === 1) {
      // 当前页,不做处理
      console.log('已在当前页,不跳转')
      return
    } else if (tabIndex === 0) {
      // 跳转到价格查询页
      console.log('跳转到价格查询页')
      wx.navigateTo({
        url: '/pages/index/index'
      })
    }
  }
})