水位图

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

属性

基础

• 组件标题： 用于在图层中显示组件的名称。1.1+

• 组件尺寸： 组件的宽度和高度，单位为px。

• 组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为px。

• 背景颜色： 组件的背景颜色。

系列

• 图形： 组件形状。

• 自定义形状： 组件的自定义形状，以“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,
    }
    

  • 字体大小： 文本标签字体大小。

  • 字体粗细： 文本标签字体粗细。

  • 字体： 文本标签字体样式。

  

标题

• 显示标题： 是否显示标题

• 内容：

  • 标题

    • 主： 主标题内容。

    • 副： 副标题内容。

  • 超链接

    • 主： 主标题超链接。

    • 副： 副标题超链接。

• 位置

  • 水平对齐

  • 垂直对齐

• 外观

  • 内边距

  • 主副间隔

• 主标题文本样式

  • 字体颜色： 主标题字体颜色。

  • 字体大小： 主标题字体大小。

  • 字体粗细： 主标题字体粗细。

  • 字体： 主标题字体样式。

• 副标题文本样式

  • 字体颜色： 副标题字体颜色。

  • 字体大小： 副标题字体大小。

  • 字体粗细： 副标题字体粗细。

  • 字体： 副标题字体样式。

提示框

• 显示提示框： 是否显示提示框。

• 提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

  • 字符串模板

    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

    • 折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
    • 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
    • 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    • 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

  • 回调函数

    return data;
    

• 触发点：

  • 坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  • 数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

• 提示外观

  • 背景颜色： 提示框浮层的背景颜色。

  • 边框颜色： 提示框浮层的边框颜色。

  • 边框宽度： 提示框浮层的边框宽。

  • 内边距： 提示框浮层内边距

• 文本样式

  • 字体颜色： 提示框字体颜色。

  • 字体大小： 提示框字体大小。

  • 字体粗细： 提示框字体粗细。

  • 字体： 提示框字体样式。

工具栏

• 显示工具栏： 是否显示工具栏。

• 功能按钮

  • 保存为图片按钮

  • 还原按钮

  • 数据视图按钮

• 位置朝向

  • 排列方式： 功能按钮的布局朝向。

  • 水平位置： 水平排列。

  • 垂直位置： 垂直排列。

• 图标尺寸

  • 图标大小

  • 间隔

数据

水位图在有多条数据的情况下，图表中数据显示最大的那一条。

静态数据

上图中的示例JSON代码如下：

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

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

数据资源

警告：

拖动到纵轴 的字段为量度---> 数值类型。即在数据资源--->值/总值列表中格式化为整型或浮点型。

交互

点击事件

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

数据响应

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

节点编程

事件

• 点击事件： 水波单击触发事件。

  • 抛出的参数： 水波所携带的数据。

• 图表配置转换完成后： 图表 Option 配置转换完成后事件。

  • 抛出的参数： 配置完成后的 Option 。

动作

• 导入图表配置： 可导入 Echarts 图表 Option 配置。

  • 接收的参数： 修改后的 Option 。