数据面板

效果

子组件

无

参数

values

数组类型 number 如: [50,20 ] 必须和下面的 Colors 一一对应

max

最大值

type

目前就支持两种 1.DataPanelType.Line 2. DataPanelType.Circle

属性

closeEffect

是否开启阴影效果

valueColors

对应上面的百分比数值数组类型

trackBackgroundColor

背景色

strokeWidth

线条宽度

事件

无

示例

@Entry
@Component
struct Index {
    build() {
        Column() {
            Row() {
                DataPanel(
                    {
                        values: [50, 30],
                        max: 100,
                        type: DataPanelType.Circle
                    }
                )
                    .width(168)
                    .height(168)
                    .closeEffect(true)// 是否开启阴影效果
                    .valueColors([Color.Blue, Color.Green])// 百分比颜色
                    .trackBackgroundColor(Color.Pink)// 背景色
                    .strokeWidth(34) // 圆环粗细 当设置过大的时候会自动找最小的

            }

            Row() {
                DataPanel(
                    {
                        values: [50, 30],
                        max: 100,
                        type: DataPanelType.Line
                    }
                )
                    .width(400)
                    .height(29)
                    .closeEffect(true)// 是否开启阴影效果
                    .valueColors([Color.Blue, Color.Green])// 百分比颜色
                    .trackBackgroundColor(Color.Pink)// 背景色
                    .strokeWidth(34) // 圆环粗细 当设置过大的时候会自动找最小的
            }

        }
    }
}