|
|
@@ -0,0 +1,73 @@
|
|
|
+<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>
|
iwt