uniapp- applet - circular progress bar

html part   

   <view class="qcard" v-for="(item, k) in listData" :key="k">
                <view class="ql">
                    <view class="tu"
                        >
                    <!-- 环形进度条 canvas -->
                        <canvas
                            :canvas-id="'canvasArcbar'+k"
                            :id="'canvasArcbar'+k" 
                            class="charts3"
                        ></canvas                        
                    ></view>
                    <view class="text">
                        <view class="qname">{{item.name}}</view>
                        <view class="qtime">更换时间：{{item.last_data_time}}</view>
                        <!-- <view class="qtime">持续时间：28/天</view> -->
                    </view>
                </view>
                <view class="qr" v-if="item.battery=='100'">
                    <text>满电</ </Status>text<>Text
                    text>
                </view>
            </view>



js part:
// Global Variables
var _self;
var canvaArcbar1;


getList() {
            this.$http
                .get("/LockManage/getLockInfo",{
                    hotelId:this.$store.state.hotelId
                }, {                    
                    header: {} / * override the global header * /,
                    dataType: "json",
                    responseType: "text"
                })
                .then(res => {
                    let data = res.data;
                    if (data.code == 0) {                                                                                                
                        this.listData=res.data.data.data;
                        for(let i=0;i<this.listData.length;i++){
                             this.getServerData(this.listData[i],i);    
                        }                                                                                                                                                                                                            
                            
                    } else {
                        uni.showToast ({
                            title: data.msg,
                            image: "/static/img/warn.png",
                            duration: 2000
                        });
                    }
                })
                .catch(err => {});
        },


 getServerData(item,index) {
            let Arcbar1 = { series: [] };
            // Here I return to the background is an array, so with equal, if your back is to return a single data needs to push into
            if(item.battery==''){
                Arcbar1.series = [
                    {Color: "# 2fc25b", data: 0, name: "remaining charge"} 
                ];
                this.showArcbar('canvasArcbar'+index, Arcbar1);    
            }else{
                Arcbar1.series = [
                    {Color: "# 2fc25b", data: parseInt (item.battery) / 100, name: "remaining charge"} 
                ];
                this.showArcbar('canvasArcbar'+index, Arcbar1);    
            }
            // setTimeout(res =>{    }, 50);
                                                                                                                      
        },
        Sowarchbr (Chanvsid, Chartdt) {
            // console.log("aaaaaaaaaaaaaaaaa");
            // console.log(canvasId);
            // console.log(chartData);
            canvaArcbar1 = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: "arcbar",
                fontSize: 11,
                legend: { show: false },
                background: "#FFFFFF",
                pixelRatio: _self.pixelRatio,
                series chartData.series,
                animation: true,
                width: _self.cWidth3 * _self.pixelRatio,
                height: _self.cHeight3 * _self.pixelRatio,
                data label: true,
                title: {
                    name: chartData.series [0] .data * 100 + "%", // here I automatically calculated, and you can directly give any string
                    color: chartData.series[0].color,
                   fontSize: 10*_self.pixelRatio
                },
                subtitle: {
                    name: chartData.series [0] .name, // where you can directly give any string
                    color: "#666666",
                    fontSize: 10*_self.pixelRatio
                },
                extra: {
                    arcbar: {
                        type: "circle", // full circle type of bar chart progress
                        width: _self.arcbarWidth * _self.pixelRatio, // arc width
                        startAngle: 0.5 // full circle starting angle can be configured simply type
                    }
                }
            });
        }


    onLoad() {
        
        _self = this;
        this.cWidth3 = 79; // here to correspond to the width and height of the pattern
        this.cHeight3 = 79; // here to correspond to the width and height of the pattern       
        this.arcbarWidth=uni.upx2px(24);
        this.getList();                     
    },