dev/dcp-app-gate/pages/workbench/gauge.vue

<template>
	<view class="">
		<!-- 签到人数 -->
		<view class="top-font">截至当前</view>
		<view class="signbox">
			<view class="sign-small-box">
				<view class="signNum">{{signinNum}}</view>
				<view class="bottom-font">签到人数</view>
			</view>
			<view class="sign-small-box">
				<view class="nosignNum">{{parseInt(totalCountNum)-parseInt(signinNum)}}</view>
				<view class="bottom-font">未签到人数</view>
			</view>
		</view>
		<!-- 仪表盘 -->
		<view class="qiun-charts3">
			<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/static/js/u-charts.js';
	var _self;
	var canvaArcbar1;
	
	export default {
		props: ['signinNum', 'totalCountNum'],
		watch: {
			totalCountNum(){
				this.getServerData()
			}
		},
		data() {
			return {
				cWidth3:'',//圆弧进度图
				cHeight3:'',//圆弧进度图
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio:1,
			}
		},
		mounted() {
			_self = this;
			this.cWidth3=uni.upx2px(250);//这里要与样式的宽高对应
			this.cHeight3=uni.upx2px(250);//这里要与样式的宽高对应
			this.arcbarWidth=uni.upx2px(24);
			this.getServerData();
		},
		methods: {
			getServerData(){
				let percent = (parseInt(this.signinNum)/parseInt(this.totalCountNum)).toFixed(2);
				let Arcbar1={series:[{
					"name": "签到比例",
					"data": percent,
					"color": "#92bdfe"
				  }]};
				_self.showArcbar("canvasArcbar1",Arcbar1);
			},
			showArcbar(canvasId,chartData){
				canvaArcbar1=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:{show:false},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3*_self.pixelRatio,
					height: _self.cHeight3*_self.pixelRatio,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',//这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].color,
						fontSize: 25*_self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,//这里您可以直接给任意字符串
						color: '#666666',
						fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'circle',//整圆类型进度条图
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
							startAngle:0.5//整圆类型只需配置起始角度即可
						}
					}
				});
				
			}
		}
	}
</script>

<style>
	.top-font{
		font-size: 30rpx;
		text-indent: 1.5em;
	}
	.signbox{
		width: 100%;
		height: 85px;
		display: flex;
	}
	.sign-small-box{
		flex: 1;
	}
	.signNum{
		font-size: 76rpx;
		font-weight: 700;
		text-align: center;
		color: #e15632;
	}
	.nosignNum{
		font-size: 76rpx;
		font-weight: 700;
		text-align: center;
		color: #218d84;
	}
	.bottom-font{
		font-size: 30rpx;
		text-align: center;
	}
	.qiun-charts3 {
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		justify-content: space-around;
	}

	.charts3 {
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}
</style>