自定义环形电量图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 = 0if (this.data.percentage < 50) {rote = 180 - (this.data.percentage / 100) * 360this.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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！