YD_WeChatApplet/subpackage/parent/fitness-detail/fitness-detail.js

// subpackage/parent/fitness-detail/fitness-detail.js
import uCharts from '../../../utils/chart/u-charts';

var uChartsInstance = {};

Page({
  data: {
    item: null,          // 当前指标完整数据
    name: '',
    unit: '',
    // canvas尺寸
    lineCWidth: 300,
    lineCHeight: 220,
    pixelRatio: 2,
  },

  onLoad() {
    const item = wx.getStorageSync('fitnessDetailItem') || null
    if (item) {
      const fmt = v => (v != null && !isNaN(v)) ? Number(v).toFixed(1) : v
      const formattedItem = {
        ...item,
        lastScore:     fmt(item.scoreTrendChart.axisY.slice(-1)[0]),
        classAvgScore: fmt(item.classAvgScore),
        schoolAvgScore: fmt(item.schoolAvgScore),
      }
      this.setData({ item: formattedItem, name: item.name, unit: item.unit || '' })
      wx.setNavigationBarTitle({ title: item.name + '详情' })
    }
  },

  onReady() {
    const info = wx.getWindowInfo()
    const pixelRatio = info.pixelRatio
    const lineCWidth  = info.windowWidth * 0.86
    const lineCHeight = info.windowWidth * 0.58
    this.setData({ lineCWidth, lineCHeight, pixelRatio }, () => {
      this.drawLineChart()
    })
  },

  drawLineChart() {
    const that = this
    const item = that.data.item
    const trend = item && item.scoreTrendChart
    if (!trend || !trend.axisX || trend.axisX.length === 0) return
    const query = wx.createSelectorQuery().in(that)
    query.select('#lineCanvas').fields({ node: true, size: true }).exec(res => {
      if (!res[0]) return
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      canvas.width  = res[0].width  * that.data.pixelRatio
      canvas.height = res[0].height * that.data.pixelRatio
      uChartsInstance['lineCanvas'] = new uCharts({
        type: 'line',
        context: ctx,
        width:  that.data.lineCWidth  * that.data.pixelRatio,
        height: that.data.lineCHeight * that.data.pixelRatio,
        categories: trend.axisX,
        series: [{ name: that.data.name, data: trend.axisY, color: '#4A90E2' }],
        pixelRatio: that.data.pixelRatio,
        animation: true,
        background: '#FFFFFF',
        color: ['#4A90E2'],
        padding: [20, 20, 10, 0],
        enableScroll: true,
        legend: { show: false },
        xAxis: {
          disableGrid: true,
          itemCount: 4,
          scrollShow: true,
          fontSize: 11,
          fontColor: '#666',
          axisLineColor: '#eee',
          scrollColor: '#e8f4ff',
          scrollBackgroundColor: '#f5f5f5',
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#f1f1f1',
          fontSize: 11,
          fontColor: '#666',
        },
        extra: {
          line: {
            type: 'curve',
            width: 3,
            activeType: 'hollow',
            onShadow: true,
            linearType: 'custom',
          },
          tooltip: { showBox: true },
        },
      })
    })
  },

  tapLine(e) {
    if (uChartsInstance['lineCanvas']) {
      uChartsInstance['lineCanvas'].showToolTip(e)
    }
  },
  touchstartLine(e) {
    if (uChartsInstance['lineCanvas']) uChartsInstance['lineCanvas'].scrollStart(e)
  },
  touchmoveLine(e) {
    if (uChartsInstance['lineCanvas']) uChartsInstance['lineCanvas'].scroll(e)
  },
  touchendLine(e) {
    if (uChartsInstance['lineCanvas']) {
      uChartsInstance['lineCanvas'].scrollEnd(e)
      uChartsInstance['lineCanvas'].showToolTip(e)
    }
  },
})