circle.vue.wxml

<template name="1c62360c"><view style="text-align: center;" class="_view data-v-6f8f932a"><view style="display: inline-block;position: relative;" class="_div data-v-6f8f932a"><svg style="transform: rotate(-90deg)" width="{{width}}" height="{{width}}" xmlns="http://www.w3.org/2000/svg" class="_svg data-v-6f8f932a"><circle r="{{(width-radius)/2}}" cy="{{width/2}}" cx="{{width/2}}" stroke-width="{{radius}}" stroke="{{backgroundColor}}" fill="none" class="_circle data-v-6f8f932a"></circle><circle ref="$bar" r="{{(width-radius)/2}}" cy="{{width/2}}" cx="{{width/2}}" stroke="{{barColor}}" stroke-width="{{radius}}" stroke-linecap="{{isRound ? 'round' : 'square'}}" stroke-dasharray="{{(width-radius)*3.14}}" stroke-dashoffset="{{isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100}}" fill="none" class="_circle data-v-6f8f932a"></circle></svg><view class="_div data-v-6f8f932a contentBox"><view class="_div data-v-6f8f932a"><image src="{{picSrc}}" alt class="_img data-v-6f8f932a"></image></view><view class="_div data-v-6f8f932a" style=" {{('color:' + textColor + ';')}}">{{num}}人</view></view></view></view></template>