uniapp使用ucharts制作饼图

1.在uniapp找到秋云ucharts 下载导入项目

2.可以在uCharts官网 - 秋云uCharts跨平台图表库查看示例

3.查看文档找到自己想做成的效果

下面是我的用法：

<template>
	<view class="report-form">
		<view class="chart-box" :style="{'height': chartDataRadarLength / 3 * 140 + 'rpx'}">
			<view
				v-if="!(chartDataRadar&&chartDataRadar.series&&chartDataRadar.series.length>0&&chartDataRadar.series[0].data&&chartDataRadar.series[0].data.length>0)"
				class="no-data">
				<view class="no-data-text">
					暂无数据
				</view>
			</view>
			<qiun-data-charts v-if="!tempPwdLogin&&(chartDataRadar&&chartDataRadar.series&&chartDataRadar.series.length>0&&chartDataRadar.series[0].data&&chartDataRadar.series[0].data.length>0)" type="ring" :canvas2d="true" canvasId="radar" :opts="optsRadar"
				:chartData="chartDataRadar" />
		</view>
	</view>
</template>

<script>
    export default {
		data() {
			return {
				tabIndex: 0,
				beginTime: '',
				endTime: '',
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。

				chartDataRadar: {},
				optsRadar: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: uni.upx2px(50)
					},
					title: {
						show: false,
						name: "",
						fontSize: uni.upx2px(42),
						color: "#000"
					},
					subtitle: {
						show: false,
						name: "",
						fontSize: uni.upx2px(28),
						color: "#666"
					},
					extra: {
						ring: {
							ringWidth: uni.upx2px(60),
							activeOpacity: 0.5,
							activeRadius: uni.upx2px(10),
							offsetAngle: 0,
							labelWidth: uni.upx2px(15),
							border: false,
							borderWidth: uni.upx2px(3),
							borderColor: "#FFFFFF"
						}
					}
				},
				chartDataRadarLength: 0,
				tempPwdLogin: false,
			};
		},
		props: {
			detailForm: {
				type: Object
			},
			type:{
				type:Number,
				default:0
			},
			optionsData: {
				type: Array,
				default () {
					return [{
							name: '剩余还款',
							value: 0
						},
						{
							name: '审核中',
							value: 0
						},
						{
							name: '已还款',
							value: 0
						},
					]
				}
			}

		},
		onReady() {
			this.init()
		},
		onShow() {
			if (uni.getStorageSync("tempPwdLogin")) {
				this.tempPwdLogin = true
			}
			this.init()
		},
		watch: {
			detailForm(val) {
				this.init()
			}
		},
		methods: {
			init() {
				this.getRadarData()
			},
			
			getRadarData() { 
				if(this.type==2){
					this.optionsData.forEach(item=>{
						if(item.name=='剩余还款'){
							item.value=Number(this.detailForm.residueAmount) 
						}else if(item.name == '审核中'){
							item.value=Number(this.detailForm.repaymentUnderReview) 
						}else if(item.name == '已还款'){
							item.value=Number(this.detailForm.amountRepaid)
						}
					})
				}else if(this.type == 1){
					this.optionsData.forEach(item=>{
						if(item.name=='剩余还款'){
							item.value=Number(this.detailForm.residueAmount) 
						}else if(item.name == '审核中'){
							item.value=Number(this.detailForm.applyAmount) 
						}else if(item.name == '已还款'){
							item.value=Number(this.detailForm.repaid)
						}
					})
				}
				
				let info = {
					series: [{
						data: this.optionsData
					}],
				}
				this.chartDataRadar = JSON.parse(JSON.stringify(info));
				console.log(this.chartDataRadar,'this.chartDataRadar');
			},
			formatDate(date, fmt = 'yyyy-MM-dd') {
				if (/(y+)/.test(fmt)) {
					// 把数字变成字符串
					let dateY = date.getFullYear() + "";
					//RegExp.$1 在判断中出现过，且是括号括起来的，所以 RegExp.$1 就是 "yyyy"
					fmt = fmt.replace(RegExp.$1, dateY.substr(4 - RegExp.$1.length));
				}

				//获取其他
				let o = {
					"M+": date.getMonth() + 1,
					"d+": date.getDate(),
					"h+": date.getHours(),
					"m+": date.getMinutes(),
					"s+": date.getSeconds(),
				};
				for (const k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + "";
						fmt = fmt.replace(
							RegExp.$1,
							RegExp.$1.length == 1 ? str : this.padLeftZero(str)
						);
					}
				}
				return fmt;
			},
			padLeftZero(str) {
				return ("00" + str).substr(str.length);
			}
		}
	};
</script>

效果如图：