# 水位图

React版

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

<dv-water-level-pond :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}'标记。