微学习 Canvas [环形图]

View代码

<template>
	<view>
			<canvas class="arcCanvas"  canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
</template>

CSS代码

.arcCanvas{
		width: 100%;
		height: 400rpx;
}

Script代码

export default {
	
	props:{
		
		colorsList:{
			type:Array,
			default: function () {
				return ["#3E6FEF","#1EB292","#FF983B","#FF440E"]
			}
		},
		dataList:{
			type:Array,
			default: function () {
				return [10.5,20.3,30.7,40.9,20]
			}
		},
		nameList:{
			type:Array,
			default: function () {
				return ["营销一部","营销二部","营销三部","营销四部"]
			}
		},
		defaultColor:{
			type:String,
			default: function () {
				return "#C4C4C4"
			}
		},
		defaultinterval:{
			type:Number,
			default:function () {
				return 20
			}
		}
	},
	data(){
		return{
			windths:0,
			heights:0,
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		query.select('#firstCanvas').boundingClientRect(data => {
		  console.log("得到布局位置信息" + JSON.stringify(data));
		  console.log("节点高度的距离为" + data.height);
			this.heights = data.height;
		}).exec();
		//屏幕宽度
		let windths = uni.getSystemInfoSync().windowWidth
		//开启画布
		var context = uni.createCanvasContext('firstCanvas')
		
		
		
		for (var i = 1; i <= this.dataList.length; i++) {
			//新建一根线条
			context.beginPath()
			//设置线条宽度
			context.setLineWidth(10)
			//设置线条颜色
			context.setStrokeStyle(this.defaultColor)
			/**
			 * 横向点
			 * 竖向点
			 * 圆弧半径
			 * 开始角度
			 * 结束角度
			 */
			context.arc( (windths / 3) , (this.heights * 0.5) , (this.defaultinterval * i) , 0 ,  Math.PI * 2 )
			//开始画
			context.stroke()
			 
			context.beginPath()
		 
			context.setStrokeStyle(this.colorsList[i % this.colorsList.length ])
			
			context.arc( (windths / 3) , (this.heights * 0.5) , (this.defaultinterval * i) , Math.PI *1.5 , ((Math.PI * 2 / 100) * this.dataList[i - 1] + (Math.PI*1.5)) )
			
			context.stroke();
			
			context.beginPath()
			context.arc((windths / 5)*3.35, i * 20 + 45 , 3 , 0 ,  Math.PI * 2 )
			context.fillStyle=this.colorsList[i % this.colorsList.length ];
			context.fill();
			context.stroke();
			
			context.beginPath()
			// 文字样式
			context.font = '14px 微软雅黑'
			//开始写文字
			context.fillText(this.nameList[i-1] +":" + this.dataList[i - 1]+"%" , (windths / 5)*3.5, i * 20 + 50);
		}
		
		
		  
		
		
		
		//将图形画再幕布上
		context.draw()
	}
}

效果展示