DataV-React

# 水位图

（Vue版）

水位图有三种形态，多种配置，具体使用示例如下：

<WaterLevelPond config={config} style={{width: '150px', height: '200px'}} />
点击复制

# 矩形水位图

点击以展示/隐藏config数据
export default {
  data: [66]
}

# 圆角水位图

点击以展示/隐藏config数据
export default {
  data: [66, 45],
  shape: 'roundRect'
}

# 圆形水位图

点击以展示/隐藏config数据
export default {
  data: [55],
  shape: 'round'
}

# config 属性

属性 说明 类型 可选值 默认值
data 水位位置[1] Arrya<Number> --- []
shape 水位图形状 String [2] 'rect'
colors 水位图配色 Array<String> [3] [4]
waveNum 波浪数量 Number --- 3
waveHeight 波浪高度 Number --- 40
waveOpacity 波浪透明度 Number --- 0.4
formatter 信息格式化 String --- '{value}%'[5]

# 注释

[1] 可以有多个水位，但默认显示值最大的水位信息。

[2] 有三种形状可供选择：矩形rect、圆角矩形roundRect、圆形round。

[3] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[4] 默认配色为['#00BAFF', '#3DE7C9'], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。

[5] 自动使用最大的水位值替换字符串中的'{value}'标记。

← 进度池 →