更新记录

1.0.0（2026-09-24）

wui-charts-ball 水波球进度 组件 是 uniapp-x 组件 uniapp-x 蒸汽模式下跨全端。

平台兼容性

uni-app x(5.23)

其他

wui-charts-ball （水波球进度）组件开发文档介绍

简介：

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

优势：

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

使用说明：

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

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

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

styleOpts对象属性介绍：

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

属性响应式代码示例：

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="align-items: center;padding-top: 20px;">
            <view style="background-color: #eee;align-items: center;padding: 10px;width: 100%;">
                <wui-charts-ball ref="ball" :data="data" :isAnimate="isAnimate" :timehand="200"
                    :styleOpts="styleOpts"></wui-charts-ball>
            </view>
            <view class="btn-box">
                <button size="mini" @click="clikWH('修改线宽')">修改线宽</button>
                <button size="mini" @click="clikWH('修改宽高')">修改宽高</button>
                <button size="mini" @click="clikWH('修改内边距')">修改边距</button>
            </view>
            <view class="btn-box">
                <button size="mini" @click="clikWH('文字大小')">文字大小</button>
                <button size="mini" @click="clikWH('修改前景')">修改前景</button>
                <button size="mini" @click="clikWH('修改前景')">修改前景</button>
            </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" size="mini" @click="btnClik">{{btntxt}}</button>
            </view>
        </view>
    </scroll-view>
</template>

<script setup lang="uts">
    let data = ref(80);
    let btntxt = ref('关闭进场动画');
    let isAnimate = ref(true);
    let styleOpts = ref({
        bgColor:"#fff",
        textColor:"#f00"
    })
    const ball = ref<ComponentPublicInstance | null>(null);
    function clikWH(str : string) {
        if (str == "修改线宽") {
            if (styleOpts.value['lineWidth'] != 3) {
                styleOpts.value['lineWidth'] = 3;
            } else {
                styleOpts.value['lineWidth'] = 1;
            }

        }
        if(str == "修改内边距"){
            if (styleOpts.value['padding'] != 10) {
                styleOpts.value['padding'] = 10;
            } else {
                styleOpts.value['padding'] = 0;
            }
        }
        if (str == "文字大小") {
            if (styleOpts.value['font'] != 30) {
                styleOpts.value['font'] = 30;
            } else {
                styleOpts.value['font'] = 20;
            }
        }
        if (str == "修改宽高") {
            if (styleOpts.value['width'] != 200) {
                styleOpts.value['width'] = 200;
                styleOpts.value['height'] = 200;
            } else {
                styleOpts.value['width'] = 100;
                styleOpts.value['height'] = 100;
            }

        }
        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'
            }

        }
    }
    function btnClik() {
        isAnimate.value = isAnimate.value ? false : true;
        btntxt.value = isAnimate.value ? '关闭进场动画' : '开启进场动画';
    }
    /* 拖动滑动条模拟数的两种改变方式 */
    function changing(e : UniSliderChangeEvent) {
        data.value = e.detail.value;
    }
</script>

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

    .btn-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        margin: 5px 0;
    }

    .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;
        border-right: 50px;
    }

    .slid {
        background-color: #fff;
        border-radius: 50px;
    }
</style>

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

<template>
    <scroll-view style="flex:1" bounces="false">
        <view style="align-items: center;padding-top: 20px;">
            <view style="background-color: #eee;align-items: center;padding: 10px;width: 100%;">
                <wui-charts-ball ref="ball" :data="data" :isAnimate="isAnimate" :timehand="timehand"
                    :styleOpts="styleOpts"></wui-charts-ball>
            </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>
            </view>
        </view>
    </scroll-view>
</template>
<script setup lang="uts">
    let data = 80;
    let btntxt = ref('关闭进场动画');
    let isAnimate = ref(true);
    let styleOpts = ref({
        bgColor:"#fff",
        textColor:"#f00"
    })
    const ball = ref<ComponentPublicInstance | null>(null);

    /* 拖动滑动条模拟数的两种改变方式 */
    function changing(e : UniSliderChangeEvent) {
        data = e.detail.value;
        if (ball.value != null) {
            ball.value!.$callMethod('drawing', data.value);
        }
    }
</script>
<style>
    .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;
        border-right: 50px;
    }

    .slid {
        background-color: #fff;
        border-radius: 50px;
    }
</style>