function getRingStyle(props: {
percent: number
duration: number
radius: number
ringWidth: number
activeColor?: string
inactiveColor?: string
}) {
const {
percent,
duration,
radius,
ringWidth,
activeColor = '',
inactiveColor = '',
} = props
const getRingLength = (deg = 0, r = 80) => (deg / 100) * (2 * Math.PI * r)
const maxLength = getRingLength(100)
const ringWidth2 = (ringWidth / radius) * 80
const rate = ringWidth2 / 160
const strokeWidth = (160 * rate) / (1 - rate)
const wh = 160 + strokeWidth
const cx = 120 - strokeWidth / 2
const cy = 80 + strokeWidth / 2
const svg = `<svg width="${160}" height="${160}" viewBox="0 0 ${wh} ${wh}" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle
cx="${cx}"
cy="${cy}"
r="80"
fill-opacity="0"
stroke-width="${strokeWidth}"
stroke="${inactiveColor}"
stroke-opacity="1"
stroke-dasharray="${maxLength} ${maxLength}"
stroke-linecap="round"
transform="rotate(-90 100 100)"
>
</circle>
<circle
cx="${cx}"
cy="${cy}"
r="80"
fill-opacity="0"
stroke-width="${strokeWidth}"
stroke="${activeColor}"
stroke-opacity="1"
stroke-dasharray="0 ${maxLength}"
stroke-linecap="round"
transform="rotate(-90 100 100)"
style="transition: stroke-dasharray ${duration / 1000}s linear;"
>
<set attributeName="stroke-dasharray" attributeType="XML" to="${getRingLength(
percent
)} ${maxLength}" begin="0s" />
</circle>
</svg>`
return {
backgroundImage: `url(data:image/svg+xml;base64,${base64.encode(svg)})`,
backgroundSize: '100% 100%',
}
}
小程序圆环图（svg实现）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1.官网 文档->使用手册->应用篇->跨平台方案->微信小程序 下载echarts包 2.将ec-canvas文...
- SVG因其缩放不失真,可动态改变颜色等特点, 在web开发中得到了广泛的使用, 目前常见的使用方式有两种 1. 转...
