先看效果图：
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>
效果如下：
标签：百分比,computedStyle,val,30deg,percent,环形,properties,CSS,deg From： https://www.cnblogs.com/alone4436/p/17797298.html