效果：

cicle.wpy

<style lang="less">

    .cicle {
        position: relative;
        width: 88px;
        height: 88px;
        margin: 0 auto;
        border-width: 6px;
        border-color: #ccc;
        border-style: solid;
        border-radius: 50%;
    }

    .cicle view,.cicle{
        box-sizing:content-box;
        -webkit-box-sizing:content-box;
        -moz-box-sizing: content-box;
    }

    .cicle .bar {
        position: absolute;
        width: 50px;
        height: 100px;
        overflow: hidden;
    }

    .cicle .bar-left {
        top: -6px;
        left: -6px;
    }

    .cicle .bar-an {
        position: absolute;
        width: 88px;
        height: 88px;
        border-width:6px;
        border-style: solid;
        border-radius: 50%;
        transform: rotate(-135deg);
    }

    .cicle .bar-left .bar-left-an {
        z-index: 10;
        border-color: transparent transparent #20a53a #20a53a;
        transition: transform 300ms linear;
    }

    .cicle .bar-right {
        top: -6px;
        left: 44px;
    }

    .cicle .bar-right .bar-right-an {
        left: -50px;
        z-index: 20;
        border-color: #20a53a #20a53a transparent transparent;
        transition: transform 300ms linear;
    }

    .cicle .occupy {
        position: absolute;
        width: 88px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        font-size: 18px;
        color: #20a53a;
    }
</style>
<template>
    <view class="cicle mem-release" style="{{style}}">
        <view class="bar bar-left">
            <view class="bar-left-an bar-an" style="{{'transform: rotate('+leftRate+'deg);'+barleftan}}"></view>
        </view>
        <view class="bar bar-right">
            <view class="bar-right-an bar-an" style="{{'transform: rotate('+rightRate+'deg);'+barrightan}}"></view>
        </view>
        <view class="occupy" style="{{occupyStyle}}">{{text}}</view>
        <view class="mem-re-min"></view>
        <view class="mem-re-con" title="$data['lan']['P3']"></view>
    </view>
</template>
<script>
    import wepy from 'wepy'

    export default class Cicle extends wepy.component {

        props = {
            max    : {
                type   : Number,
                default: 100,
            },
            current: {
                type   : Number,
                default: 0,
            },
            text   : {
                type   : String,
                default: '',
            },
            color: {
                type: String,
                default: '#20a53a'
            },
            style: {
                type: String,
                default: ''
            }
        };

        data = {
            barleftan: '',
            barrightan: '',
            occupyStyle:'',
            leftRate: -135, //-135 - 45
            rightRate: -135, //-135 - 45
        };

        onLoad(){
            const {color} = this;
            this.barleftan = `border-color: transparent transparent ${color} ${color};`;
            this.barrightan = `border-color: ${color} ${color} transparent transparent;`;
            this.occupyStyle = `color: ${color};`;
            this.$apply();
        }

        watch={
            current(n,o){
                const {max} = this;
                let rate = n / max;
                if (rate < 0.5) {
                    this.rightRate = -135 + (360 * rate);
                    this.leftRate = -135;
                } else {
                    this.rightRate = 45;
                    this.leftRate = -135 + (360 * (rate - 0.5));
                }
            }
        };

    }
</script>