更新记录

1.0.0（2021-09-13） 下载此版本

进度环形展示

平台兼容性

mftcc-JDAnnular 进度环插件

使用说明：

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

props说明:

props: {
    percent: {
        // 百分比
        type: Number,
        default: 0
    },
    prefix: {
        // 多个圆环情况下的前缀
        type: String,
        default: ""
    },
    size: {
        // 图表的宽度和高度，单位 upx
        type: Number,
        default: 120
    },
    strokeWidth: {
        // 进度环的线宽，单位 upx
        type: Number,
        default: 10
    },
    strokeColor: {
        // 进度环的颜色 16进制
        type: String,
        default: "#2d8cf0"
    },
    trailWidth: {
        // 进度环背景的线宽，单位 upx
        type: Number,
        default: 12
    },
    trailColor: {
        // 进度环背景的颜色
        type: String,
        default: "#eaeef2"
    },
    BgId: {
        // BgId背景圆环CanvasID
        type: String,
        required: true
    },
    InId: {
        // IgId进度圆环CanvasID
        type: String,
        required: true
    },
    dashboard: {
        // 仪表盘
        type: Boolean,
        default: false
    },
    start: {
        // 仪表盘起始角度 -> 和x轴的夹角
        type: Number,
        default: 27
    }
},

引入示例:

··
···

            <iCircle percent="75" :dashboard="true" BgId="BgId1" InId="InId1">
                <text style="font-size:20rpx; color: #4A87D5;font-weight: 400;">信誉度<br></text>
                <text
                    style="font-size:50rpx; color: #4A87D5;font-weight: 600;line-height: 1;">{{ percent }}<span
                        style="font-size:24rpx; color: #4A87D5;">%</span></text>
                <view slot="canvas">
                    <canvas class="CanvasBox strokeCanvas" canvas-id="BgId1"></canvas>
                    <canvas class="CanvasBox trailCanvas" canvas-id="InId1"></canvas>
                </view>
            </iCircle>

···