uniapp-小程序-環形進度條

html部分   

   <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>滿電</text>
                    <text>狀態</text>
                </view>
            </view>



js部分：
//全局變量
var _self;
var canvaArcbar1;


getList() {
            this.$http
                .get("/LockManage/getLockInfo",{
                    hotelId:this.$store.state.hotelId
                }, {                    
                    header: {} /* 會覆蓋全局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: [] };
            //這里我后台返回的是數組，所以用等於，如果您后台返回的是單條數據，需要push進去
            if(item.battery==''){
                Arcbar1.series = [
                    { color: "#2fc25b", data:0, name: "剩余電量" } 
                ];
                this.showArcbar('canvasArcbar'+index, Arcbar1);    
            }else{
                Arcbar1.series = [
                    { color: "#2fc25b", data:parseInt(item.battery)/100, name: "剩余電量" } 
                ];
                this.showArcbar('canvasArcbar'+index, Arcbar1);    
            }
            // setTimeout(res =>{    }, 50);
                                                                                                                      
        },
        showArcbar(canvasId, chartData) {
            // 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,
                dataLabel: true,
                title: {
                    name: chartData.series[0].data*100 + "%", //這里我自動計算了，您可以直接給任意字符串
                    color: chartData.series[0].color,
                   fontSize: 10*_self.pixelRatio
                },
                subtitle: {
                    name: chartData.series[0].name, //這里您可以直接給任意字符串
                    color: "#666666",
                    fontSize: 10*_self.pixelRatio
                },
                extra: {
                    arcbar: {
                        type: "circle", //整圓類型進度條圖
                        width: _self.arcbarWidth * _self.pixelRatio, //圓弧的寬度
                        startAngle: 0.5 //整圓類型只需配置起始角度即可
                    }
                }
            });
        }


    onLoad() {
        
        _self = this;
        this.cWidth3 = 79; //這里要與樣式的寬高對應
        this.cHeight3 = 79; //這里要與樣式的寬高對應       
        this.arcbarWidth=uni.upx2px(24);
        this.getList();                     
    },