更新记录

1.0.0（2026-09-24）

首次发布 wui-charts-annular 环形进度条 组件 uniapp-x 蒸汽模式下跨全端。

平台兼容性

uni-app x(5.23)

其他

wui-charts-annular 环形进度条 组件 开发文档介绍

简介：

wui-charts-annular 环形进度条 组件, 仅支持uniapp-x项目蒸汽模式下跨全端通用，支持js / ts/ uts 跨语言使用，高性能。

优势：

组件逻辑依然采用uts语法，支持新版Vapor蒸汽模式，跨全端，体积小，高性能。

使用说明：

通过插件市场下载会自动导入插件到项目中,然后就可以直接写wui-charts-annular标签使用了。

<wui-charts-annular :data="50"></wui-charts-annular>

wui-charts-annular 组件的所有属性如下：

组件的 styleOpts 对象属性介绍：

wui-charts-annular组件对外暴露的方法如下：

属性响应式代码示例：

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="align-items: center;padding-top: 20px;">
            <text>默认颜色</text>
            <text style="margin: 10px 0;">用法1：利用vue的数据驱动更新来更新进度条</text>
            <view style="background-color: #fff;align-items: center;padding: 10px;width: 100%;">
                <wui-charts-annular ref="annular" :data="data" :isAnimate="isAnimate" :timehand="timehand"
                    :styleOpts="styleOpts"></wui-charts-annular>
            </view>
            <view class="btn-box">
                <button @click="clikWH('修改线宽')">修改线宽</button>
                <button @click="clikWH('修改宽高')">修改宽高</button>
                <button @click="clikWH('修改背景')">修改背景</button>
                <button @click="clikWH('修改前景')">修改前景</button>
            </view>

            <view class="slid" style="margin-top: 15px;">
                <slider style="flex: 1;" valueColor="#fff" @changing="changing" :value="data" :min="0" :max="100"
                    :step="1" :show-value="true" />
                <button @click="btnClik1">{{btntxt}}</button>
            </view>
        </view>
    </scroll-view>
</template>
<script setup lang="uts">
    let timehand = 50;
    let isAnimate = ref(false);
    let btntxt = ref('开启进场动画');
    let data = ref(80);
    let styleOpts = ref({
        width: 150,
        height: 150,
        lineWidth: 8
    });
    const annular = ref<ComponentPublicInstance | null>(null);
    function clikWH(str : string) {
        if (str == "修改线宽") {
            if (styleOpts.value['lineWidth'] != 20) {
                styleOpts.value['lineWidth'] = 20;
            } else {
                styleOpts.value['lineWidth'] = 8;
            }

        }
        if (str == "修改宽高") {
            if (styleOpts.value['width'] != 200) {
                styleOpts.value['width'] = 200;
                styleOpts.value['height'] = 200;
            } else {
                styleOpts.value['width'] = 150;
                styleOpts.value['height'] = 150;
            }

        }
        if (str == "修改背景") {
            if (styleOpts.value['bgColor'] != '#ffff7f') {
                styleOpts.value['bgColor'] = '#ffff7f';
            } else {
                styleOpts.value['bgColor'] = '#ffffff';
            }

        }
        if (str == "修改前景") {
            if (styleOpts.value['textColor'] != '#37ff14') {
                styleOpts.value['textColor'] = '#37ff14';
                styleOpts.value['ringColor'] = '#37ff14';
                styleOpts.value['ringBgColor'] = '#5e5e2f'
            } else {
                styleOpts.value['textColor'] = '#2ba0fb';
                styleOpts.value['ringColor'] = '#2ba0fb';
                styleOpts.value['ringBgColor'] = '#e5f1fa'
            }

        }
    }

    /* 拖动滑动条模拟改变数据data*/
    function changing(e : UniSliderChangeEvent) {
        data.value = e.detail.value;
    }

    /* 进场动画 */
    function btnClik() {
        isAnimate1.value = isAnimate1.value ? false : true;
        btntxt1.value = isAnimate1.value ? '关闭进场动画' : '开启进场动画';
    }
</script>

<style>
    .btn-box {
        flex-direction: row;
        align-items: first baseline;
        justify-content: space-around;
        width: 100%;
    }

    .slid {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
        height: 40px;
        width: 100%;
        margin: 2px 10px;
        background-color: #ddd;
        border: 1rpx #999 solid;
        border-radius: 4px;
        padding-left: 20px;
    }
</style>

内部方法调用示例利用drawing方法更新百分比数据：

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="align-items: center;padding-top: 20px;">
            <text> 默认颜色</text>
            <text style="margin: 10px 0;">用法2：利用组件的drawing函数来更新进度条</text>
            <view style="background-color: #fff;align-items: center;padding: 10px;width: 100%;">
                <wui-charts-annular ref="annular" :data="data" :isAnimate="isAnimate" :timehand="timehand"
                    :styleOpts="styleOpts"></wui-charts-annular>
            </view>
            <view class="slid-box">
                <view style="flex: 1;">
                    <slider class="slid" valueColor="#fff" @changing="changing" :value="data" :min="0" :max="100"
                        :step="1" :show-value="true" />
                </view>
                <button class="btn" @click="btnClik">{{btntxt}}</button>
            </view>
        </view>

    </scroll-view>
</template>

<script setup lang="uts">
    let timehand = 50;
    let isAnimate = ref(true);
    let btntxt = ref('关闭进场动画');
    let data = 60;
    let styleOpts = {
        width: 150,
        height: 150,
    }
    const annular = ref<ComponentPublicInstance | null>(null);

    /* 拖动滑动条模拟改变数据data */
    function changing(e : UniSliderChangeEvent) {
        //无ref赋值时，直接用wui-charts-annular组件的drawing函数改变数据
        data = e.detail.value;
        if (annular2.value != null) {
            annular2.value!.$callMethod('drawing', data);
        }
    }

    /* 进场动画 */
    function btnClik2() {
        isAnimate.value = isAnimate.value ? false : true;
        btntxt.value = isAnimate.value ? '关闭进场动画' : '开启进场动画';
    }
</script>

<style>
    .btn {
        margin-left: 5px;
        border-radius: 50px;
    }

    .btn-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100%;
    }
    .slid-box{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        height: 40px;
        width: 100%;
        margin: 2px 10px;
        background-color: #ddd;
        border: 1rpx #999 solid;
        border-radius: 4px;
        padding:0 5px;
        margin-top: 15px;
        border-right: 50px;
    }
    .slid {
        background-color: #fff;
        border-radius: 50px;
    }
</style>