利用CSS 实现环形百分比进度展示-526互联

先看效果图：

UI设计了这样的效果，已读人数占总人数的百分比，环形展示。

这里可以用echarts图表，也可以用css实现，因为我是在小程序环境下，考虑到包大小体积，采用了css实现。

核心就是一行代码：

background-image:conic-gradient( #e9e9e9 30deg, transparent 30deg);

这个只是一个静态示例，结合个人实际业务，动态生成角度值就好了。

// components/CirclePercent/CirclePercent.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        percent: {
            type: Number,
            value: 0
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        deg: 0,
        computedStyle: ''
    },
    observers: {
        deg(val) {
            this.setData({
                computedStyle: `conic-gradient( #e9e9e9 ${val}deg, transparent 30deg);`

            })
            console.log('数据监听:', val, this.data.computedStyle)
        }
    },

    lifetimes: {
        attached() {
            if (this.properties.percent) {
                const deg = 360 * this.properties.percent;
                this.setData({
                    deg
                })
            }
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

<view class="circle-percent">
    <view class="circle-inside" style="background:{{computedStyle}}"></view>
</view>

效果如下：