cfc/cfc-frontend/pages/growth/mini-trend.vue

<template>
  <view class="mini-trend">
    <canvas :canvas-id="canvasId" class="trend-canvas"></canvas>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: function() { return [] }
    }
  },
  data: function() {
    return {
      canvasId: 'trend-' + Math.random().toString(36).substr(2, 9),
      drawn: false
    }
  },
  mounted: function() {
    this.$nextTick(this.drawChart)
  },
  watch: {
    data: function() {
      this.$nextTick(this.drawChart)
    }
  },
  methods: {
    drawChart: function() {
      var ctx = uni.createCanvasContext(this.canvasId, this)
      var width = 600 // rpx
      var height = 60
      var data = this.data
      if (!data.length) return
      var min = Math.min.apply(null, data)
      var max = Math.max.apply(null, data)
      var range = max - min || 1
      var stepX = width / (data.length - 1 || 1)
      ctx.setStrokeStyle('#EF4444')
      ctx.setLineWidth(3)
      ctx.beginPath()
      for (var i = 0; i < data.length; i++) {
        var x = i * stepX
        var y = height - (data[i] - min) / range * (height - 10) - 5
        if (i === 0) ctx.moveTo(x, y)
        else ctx.lineTo(x, y)
      }
      ctx.stroke()
      // 末端圆点
      var lastX = (data.length - 1) * stepX
      var lastY = height - (data[data.length - 1] - min) / range * (height - 10) - 5
      ctx.setFillStyle('#EF4444')
      ctx.beginPath()
      ctx.arc(lastX, lastY, 4, 0, 2 * Math.PI)
      ctx.fill()
      ctx.draw()
      this.drawn = true
    }
  }
}
</script>

<style scoped>
.mini-trend {
  margin: 12rpx 0;
  width: 100%;
}
.trend-canvas {
  width: 100%;
  height: 60rpx;
}
</style>