data_view/docs/guide/waterLevelPond.md

---

sidebarDepth: 2

水位图

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

<dv-water-level-pond :config="config" style="width:150px;height:200px" />

矩形水位图

<<< @/docs/guide/codeData/waterLevelPond/demo2.js

圆角水位图

<<< @/docs/guide/codeData/waterLevelPond/demo2.js

圆形水位图

<<< @/docs/guide/codeData/waterLevelPond/demo3.js

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}'标记。