hbj_app/components/RingCharts/RingCharts.vue

<template>
	<view class="charts-box"><qiun-data-charts type="ring" :opts="opts" :chartData="chartData" /></view>
</template>

<script>
	export default {
		props: {
			dataArr: {
				type: Array
			}
		},
		//props数据传值组件给其异步加载，使用监听
		watch: {
			dataArr(newData) {
				this.dataArr = newData;
				//获取数据后再去渲染图表
				this.getServerData();
			}
		},
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					type: 'ring',
					rotate: false,
					rotateLock: false,
					color: ["#31cda6",
						"#cbd1e7",
						"#3763fa",
						"#74BA19",
					],
					// padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						layout: "vertical",
						itemWidth: 10,
						textStyle: {
							fontSize: 12,
							color: 'red'
						},
						lineHeight: 25,
						formatter: (name) => {
							// let total = 0;
							let tarValue = 1;
							// for (let i = 0; i < seriesData.length; i++) {
							// 	total += seriesData[i].value;
							// 	if (seriesData[i].name == name) {
							// 		tarValue = seriesData[i].value;
							// 	}
							// }
							// return `${name}  ${tarValue}个`;
							return name + "个"
						},
					},
					title: {
						show: false,
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						show: false,
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 0,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 0,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [{
						data: this.dataArr
						// data: [{ name: '待接收', value: 0 }, { name: '进行中', value: 0 }, { name: '已完成', value: 20 }, { name: '已逾期', value: 20 }]
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 100%;
	}
</style>