ucharts 圆形进度图使用

菜鸟成长之路

 

1.在官网上下载ucharts，引入至所需页面

参考文献：https://blog.csdn.net/m0_49529959/article/details/107770498?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

2.画圆形进度图

<template>
	<view>
		<view class="qiun-columns">
			<view class="content">
				<canvas canvas-id="canvasRing" id="canvasRing" class="canvas"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "../../ucharts/u-charts.min.js";
	var _self;
	var canvaRing = {};
	export default {
		data() {
			return {
				pixelRatio: 1,
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度
				Arcbar1: {
					//图表数据
					series: [{
						data: 0.8, //数据显示
						color: "#fff",
						name: "资料完整度"
					}],
				},
			}
		},
		onShow() {
			_self = this;
			this.cWidth3 = uni.upx2px(280);//环形图宽度大小
			this.cHeight3 = uni.upx2px(280);
			this.arcbarWidth = uni.upx2px(10);//环形的宽度
			//画进度条
			this.showRing("canvasRing", this.Arcbar1);
		},
		methods: {
			// //画进度条
			showRing(canvasId, chartData) {
				console.log("chartData", chartData)
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%', //显示的文字百分比					
						color: chartData.series[0].color, //环形图的颜色
						fontSize: 24 * this.pixelRatio//字体大小
					},
					subtitle: {
						name: chartData.series[0].name, //显示文字
						color: '#FFABC0',//文字颜色
						fontSize: 16 * this.pixelRatio//字体大小
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: this.arcbarWidth * this.pixelRatio, //圆弧的宽度
							startAngle: 0.5, //整圆类型只需配置起始角度即可,
							backgroundColor: '#FE809D', //环形图的剩余百分比颜色
						}
					},
					background: '#FFABC0',
					pixelRatio: this.pixelRatio,
					series: chartData.series,
					animation: false,
					width: this.cWidth3 * this.pixelRatio,
					height: this.cHeight3 * this.pixelRatio,
					dataLabel: true,
				});
			},
		}
	}
</script>

<style lang="less">
	.qiun-columns {
		height: 600rpx;
		background-color: #FD315C;
	}

	.content {
		height: 400rpx;
		position: relative;

		.canvas {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 140px;
			height: 140px;
		}

	}

</style>

效果展示