自定义环形电量图uniapp可用

刚说完uniapp不可用，就惨遭打脸：注意驼峰的写法要用 kekbeb-case命名

<template>
	<view class="ring-data">
		<view class="loading">
			<view class="left" ref="left" :style="{'--background-color': backgroundColor,'--left-rote': leftRote,'--right-rote':rightRote}"></view>
			<view class="right" ref="right" :style="{'--background-color': backgroundColor,'--left-rote': leftRote,'--right-rote':rightRote}"></view>
			<view class="progress"><text style="font-size: 12px;">{{ data.percentage }}%</text></view>
		</view>
		<view class="unit"><text style="font-size: 12px;">{{ data.type }}</text></view>
	</view>
</template>

<script>
	export default {
		name: 'RingData',
		data() {
			return {
				backgroundColor: 'red',
				leftRote: 'rotateZ(180deg)',
				rightRote: 'rotateZ(180deg)'
			}
		},
		props: {
			data: {
				type: Object,
				default () {
					return {}
				},
				require: true
			}
		},
		created: function() {
			this.changeStyle()
		},
		methods: {
			changeStyle() {
				// 改变环形比例
				let rote = 0
				if (this.data.percentage < 50) {
					rote = 180 - (this.data.percentage / 100) * 360
					this.leftRote = 'rotateZ(' + rote  + 'deg)'
				} else if (this.data.percentage === 50) {
					this.leftRote = `rotateZ(0deg)`
				} else if (this.data.percentage > 50 && this.data.percentage < 100) {
					rote = Math.floor(180 - ((this.data.percentage - 50) / 100) * 360)
					this.leftRote = `rotateZ(0deg)`
					this.rightRote = 'rotateZ(' + rote + 'deg)'
				} else if (this.data.percentage === 100) {
					this.leftRote = 'rotateZ(0deg)'
					this.rightRote = 'rotateZ(0deg)'
				}
				// 改变环形颜色
				if (this.data.percentage <= 10) {
					this.backgroundColor = '#F55C5C'
				} else if (this.data.percentage > 10 && this.data.percentage <= 45) {
					this.backgroundColor = '#FF9352'
				} else if (this.data.percentage > 45 && this.data.percentage <= 70) {
					this.backgroundColor = '#6985F2'
				} else {
					this.backgroundColor = '#49D999'
				}
			}
		},
		computed: {
		}
	}
</script>

<style scoped lang="scss">
	.ring-data {
		font-size: 7px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.loading {
			margin-top: 10px;
		}

		.unit {
			margin-top: 10px;
			color: #606266;
			text-align: center;
		}

		.number {
			margin-top: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #1c9fe5;
			text-align: center;
		}
	}

	.loading {
		width: 8em;
		height: 8em;
		position: relative;
	}

	.loading .progress {
		position: absolute;
		width: 6em;
		height: 6em;
		font-weight: bold;
		background-color: white;
		border-radius: 50%;
		left: 1em;
		top: 1em;
		line-height: 6em;
		text-align: center;
	}

	.left,
	.right {
		width: 4em;
		height: 8em;
		overflow: hidden;
		position: relative;
		float: left;
		background-color: rgb(243, 241, 241);
	}

	.left {
		border-radius: 8em 0 0 8em;
	}

	.right {
		border-radius: 0 8em 8em 0;
	}

	.left:after,
	.right:after {
		content: '';
		position: absolute;
		display: block;
		width: 4em;
		height: 8em;
		background-color: white;
		border-radius: 8em 0 0 8em;
		background-color: var(--background-color);
	}

	.right:after {
		content: '';
		position: absolute;
		display: block;
		border-radius: 0 8em 8em 0;
	}

	.left:after {
		transform-origin: right center;
		// 0%-50%左侧
		transform: var(--left-rote);
	}

	.right:after {
		transform-origin: left center;
		// 50%-100%右侧
		transform: var(--right-rote);
	}
</style>