# 水位图

水位图是一种适合于展现单个百分比数据的图表，支持多条水波和动画。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性

# 系列

图形： 组件形状。
自定义形状： 组件的自定义形状，以“path://”开头的SVG路径。
半径： 图表的大小。
x 坐标： 水位图中心的 x 轴坐标。
y 坐标： 水位图中心的 y 轴坐标。
背景颜色： 水波的背景颜色。
水波设置：
- 水波弧度： 水波的弧度大小。
- 水波长度： 水波的长度。
- 波的相位： 在弧度系统中，波的相位。默认情况下，当每个 wave 都有一个数学阶段时，它默认为“交错”。比上一个大/ 4。有两条或两条以上数据时可看到效果。
  - 平行： 平行显示。
  - 交错： 交错显示。
- 移动速度： 向前移动一个波长所需要的毫秒数。在默认情况下，它被设置为“不等速”，当波在前面有一个更大的速度。有两条或两条以上数据时可看到效果。
  - 等速： 所有数据移速相同。
  - 不等速： 所有数据移速不同。
- 波动方向： 数据移动的方向。在默认情况下，它被设置为“向右”。
  - 向左所有数据向左移动。
  - 向右所有数据向右移动。

系列图

文本标签： 指水位图上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
- 显示文本： 是否显示文本。
- 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
  
  字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
  示例：
```
{a}: {d}
```
  回调函数
  
  可用参数为data。
  
  示例：
```
return data.name;
```
  参数 data是内容格式器需要的单个数据资源。格式如下：
```
{
    // 数据名，类目名
    name: string,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
}
```
- 遮挡颜色： 被水波遮挡的文字颜色。
- 字体颜色： 文本的颜色。
- 字体大小： 文本标签字体大小。
- 字体粗细： 文本标签字体粗细。
- 字体： 文本标签字体样式。
- 水平位置： 文本标签的水平位置。
- 垂直位置： 文本标签的垂直位置。
图形设置：
- 渐变色： 是否开启渐变色。
  - 渐变色方向： 颜色过渡方向。
  - 渐变色范围： 通过滑条决定两种颜色在水位图中的占比。
- 颜色： 图形颜色。
- 阴影范围： 水波中阴影的范围。
- 阴影颜色： 水波中阴影的范围。
轮廓设置：
- 显示： 是否显示水位图外围轮廓。
- 边界距离： 内环与外环间的距离。
- 颜色： 轮廓的颜色。
- 边框类型： 边框的类型。
  - 实线
  - 虚线
  - 点线
- 边框宽度： 边框的宽度。
- 边框颜色： 边框的颜色。
- 阴影范围： 边框外围的阴影范围。
- 阴影颜色： 边框外围的阴影颜色。
初始动画：
- 开启动画： 是否开启动画。
- 动画时长： 动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果： 动画的缓动效果。

# 数据

# 静态数据

静态数据上图中的示例JSON代码如下：

[
    {
        "value": 34,
        "total": 100
    }
]

value： 度量，值。
total： 度量，总值。

若存在多个value值，则水位图显示如下。多条数据

# 数据资源

饼图模式

# 交互

# 点击事件

勾选启用，开启组件交互功能。当单击水位图时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 数据响应

水位图支持数据响应配置。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
点击事件： 水波单击触发事件。
- 抛出的参数： 水波所携带的数据。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 词云基本散点图 →

# 水位图

# 属性

# 基础

# 系列

# 标题

# 图例

# 提示框

# 工具栏

# 数据

# 静态数据

# 数据资源

# 交互

# 点击事件

# 数据响应

# 节点编程

# 事件

# 动作