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

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

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

前言

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

效果預(yù)覽

圓形進(jìn)度條

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

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

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

重點(diǎn)就是左右各畫一半然后利用transform: rotate()旋轉(zhuǎn)隱藏起來，接著利用傳進(jìn)來的當(dāng)前值計(jì)算進(jìn)度并進(jì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 計(jì)算旋轉(zhuǎn)
formatDegree(percent) {
    return -136 + (360 / this.maxVal * percent);
}

說明：

NO1: 如果當(dāng)前值大于最大值的50%則證明左右兩邊都需要計(jì)算展示進(jìn)度
NO2: 走到這里則證明當(dāng)前值小于最大值的一半只需要展示左邊進(jìn)度
NO3: 一個(gè)圈360度 / 最大值 * 多少份

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

面積圖

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

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

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

// 設(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);
},

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