小程序圓形進(jìn)度條及面積圖實現(xiàn)的方法

第小程序圓形進(jìn)度條及面積圖實現(xiàn)的方法目錄前言效果預(yù)覽圓形進(jìn)度條說明：面積圖最后

前言

以下兩個圖可以用來展示完成進(jìn)度或者進(jìn)度詳情，圖1用的是css來繪制進(jìn)度條，圖2用canvas來繪制面積圖。

效果預(yù)覽

圓形進(jìn)度條

傳進(jìn)去的有三個參數(shù)

字段意思currentVal當(dāng)前值maxVal最大值status1上漲｜2下跌

circle

:maxVal="maxVal"

:currentVal="currentVal"

:status="2"

/

重點就是左右各畫一半然后利用transform:rotate()旋轉(zhuǎn)隱藏起來，接著利用傳進(jìn)來的當(dāng)前值計算進(jìn)度并進(jìn)行旋轉(zhuǎn)展示。

左右各一半如下圖：

setCircle(){

const{currentVal,maxVal}=this;

//NO1

if(currentValmaxVal/2){

this.leftRotate=this.formatDegree(maxVal/2);

this.rightRotate=this.formatDegree(currentVal-maxVal/2);

}else{

//NO2

this.leftRotate=this.formatDegree(currentVal);

this.pointRotate=this.formatDegree(currentVal);

//NO3計算旋轉(zhuǎn)

formatDegree(percent){

return-136+(360/this.maxVal*percent);

}

說明：

NO1:如果當(dāng)前值大于最大值的50%則證明左右兩邊都需要計算展示進(jìn)度

NO2:走到這里則證明當(dāng)前值小于最大值的一半只需要展示左邊進(jìn)度

NO3:一個圈360度/最大值*多少份

關(guān)于圓點跟隨我這里的做法是設(shè)置一個一模一樣大小的盒子定位上去，并設(shè)置成圓形這樣就會和進(jìn)度條重合，然后根據(jù)當(dāng)前值旋轉(zhuǎn)就能準(zhǔn)確跟隨在進(jìn)度條的末端。

面積圖

字段意思currentVal當(dāng)前值maxVal最大值sourceData數(shù)值分布情況

combat

:maxVal="maxVal"

:currentVal="currentVal"

:sourceData="sourceData"

/

我這里的做法是先做個四邊形然后進(jìn)行旋轉(zhuǎn)變成一個棱形在根據(jù)傳入的數(shù)據(jù)進(jìn)行繪制。

//設(shè)置圖表信息

asyncsetUppixelRatio(){

constpixelRatio=awaitthis.getSystemInfo();

const{canvas:res,ctx}=this;

letcanvas=res.node;

//放大canvas解決模糊問題

canvas.width=res.width*pixelRatio;

canvas.height=res.height*pixelRatio;

this.originX=canvas.width/2;

this.originY=canvas.height/2;

this.startAngle=Math.PI+Math.PI/this.sourceData.length;

//最大值分為若干等分

batMaxVal=this.maxVal/this.sourceData.length;

this.fitAngle();

//縮小canvas

ctx.scale(pixelRatio,pixelRatio);

},

在手機(jī)上中canvas會變模糊，在這里我們先將canvas放大