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

更新時間：2022年05月05日 12:53:41 作者：劉煎蛋

做微信小程序的朋友大都接觸過或自己動手寫過自定義組件,下面這篇文章主要給大家介紹了關(guān)于小程序圓形進度條及面積圖實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

效果預(yù)覽

圓形進度條

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

字段	意思
currentVal	當前值
maxVal	最大值
status	1 上漲｜ 2 下跌

<circle 
    :maxVal="maxVal" 
    :currentVal="currentVal" 
    :status="2"
/>

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

左右各一半如下圖：

setCircle() {
    const { currentVal, maxVal } = this;
    // NO1
    if (currentVal > maxVal / 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: 如果當前值大于最大值的50%則證明左右兩邊都需要計算展示進度
NO2: 走到這里則證明當前值小于最大值的一半只需要展示左邊進度
NO3: 一個圈360度 / 最大值 * 多少份

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

面積圖

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

<combat 
    :maxVal="maxVal"
    :currentVal="currentVal" 
    :sourceData="sourceData"
/>

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

// 設(shè)置圖表信息
async setUppixelRatio() {
    const pixelRatio = await this.getSystemInfo();
    const { canvas: res, ctx } = this;
    let canvas = 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;
    // 最大值分為若干等分
    this.combatMaxVal = this.maxVal / this.sourceData.length;
    this.fitAngle();
    // 縮小canvas
    ctx.scale(pixelRatio, pixelRatio);
},

在手機上中canvas會變模糊，在這里我們先將canvas放大然后縮小就可以解決模糊的問題了。其他的都是一些畫線操作。