kly_uniapp/components/canvas.vue

<!-- 环形图组件 -->

<template>
	<view style="position: relative;width:90px;height: 90px;background-color: #ffffff;">
		<canvas canvas-id="firstCanvas1" id="firstCanvas1"></canvas>
		<canvas canvas-id="firstCanvas2" id="firstCanvas2"></canvas>
	</view>
</template>

<script>
	export default {
		name: "canvasChart",
		data() {
			return {};
		},
		props: {
			value: {}, //属性：数值，0-1之间
		},
		created() {
			let value = isNaN(Number(this.value)) ? 0.00001 : Number(this.value)==0?0.00001:Number(this.value)
			var context = uni.createCanvasContext('firstCanvas1', this)
			context.setLineWidth(15)
			context.setStrokeStyle("#f6f6f6")
			context.arc(45, 45, 35, 0, 2 * Math.PI, true)
			context.stroke()
			context.draw()
			var context2 = uni.createCanvasContext('firstCanvas2', this)
			context2.setLineWidth(15)
			context2.setStrokeStyle("#01bcc3")
			context2.arc(45, 45, 35, (1 + (value * 2)) * Math.PI, 1 * Math.PI, true)
			context2.stroke()
			context2.draw()
		}
	}
</script>

<style>
	canvas {
		width: 90px;
		height: 90px;
		position: absolute;
	}
</style>