位置：首页-资讯-前端开发

小程序圆形进度条及面积图实现的方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

前言

以下两个图可以用来展示完成进度或者进度详情，图1用的是css来绘制进度条，图2用canvas来绘制面积图。

效果预览

圆形进度条

传进去的有三个参数

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

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

重点就是左右各画一半然后利用transform: rotate()旋转隐藏起来，接着利用传进来的当前值计算进度并进行旋转展示。

左右各一半如下图：

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 计算旋转
formatDegree(percent) {
    return -136 + (360 / this.maxVal * percent);
}

说明：

NO1: 如果当前值大于最大值的50%则证明左右两边都需要计算展示进度
NO2: 走到这里则证明当前值小于最大值的一半只需要展示左边进度
NO3: 一个圈360度 / 最大值 * 多少份

关于圆点跟随我这里的做法是设置一个一模一样大小的盒子定位上去，并设置成圆形这样就会和进度条重合，然后根据当前值旋转就能准确跟随在进度条的末端。

面积图

字段	意思
currentVal	当前值
maxVal	最大值
sourceData	数值分布情况

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

我这里的做法是先做个四边形然后进行旋转变成一个棱形在根据传入的数据进行绘制。

// 设置图表信息
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放大然后缩小就可以解决模糊的问题了。其他的都是一些画线操作。