物可视IOTVIZ

    形状

    形状

    概述

    “基本图形”组件预制了一系列的基本几何图形(约20个,后续会不断增加):

    image.png

    其中有些图形含有一个或者多个的控制点,用于直观地调整图形的形态,如: “饼形”组件的控制点可以用于调整饼形的角度:

    image.png

    “梯形”组件的控制点可以用于调整梯形上底的宽度:

    image.png

    “比例填充”和“闪烁填充”

    除了“直线”以外的其他基本图形均有“比例填充”和“闪烁填充”功能。

    比例填充

    比例填充可用于动态地控制基本图形填充色的比例,以“矩形”为例:

    image.png

    • 背景:未填充部分的颜色
    • 方向:填充效果的方向(上下左右)
    • 最大值:全部填充对应的数值,即100%填充
    • 最小值:全部填充对应的数值,即0%填充
    • 当前值:用于确定填充比例的数值,若大于“最大值”,则全部填充,若小于“最小值”,则全部填充 上图所示是最大值为100、最小值为0、当前值为80、方向为从下往上时的填充效果。

    注意,填充部分颜色(即上图中的蓝色部分)仍然由“样式” -> “填充”属性配置。

    闪烁填充

    闪烁填充可用于动态地控制基本图形的“填充”颜色,常用于报警等场景,以圆形为例:

     blink_effect.gif

    • 当前值:用于确定闪烁与否的数值,若与“闪烁策略”中的某一条规则相匹配,则触发闪烁效果,若无匹配,则依旧显示“样式”中的颜色
    • 闪烁策略(默认为空,点击右侧“+”号添加)

      • 数值:用于与上述“当前值”比较
      • 频率:闪烁频率
      • 填充色1、2:两种颜色交替闪烁,若有匹配,会覆盖“样式” -> “填充”
      • 线框色1、2:两种颜色交替闪烁,若有匹配,会覆盖“样式” -> “线条颜色”

    注意,若有多条规则同时匹配,则以先添加的(靠前的)为准。

    数据绑定

    除了与其他组件相似的“通用绑定”外,基本图形还支持一些特有的绑定,如:填充、线条颜色,比例填充当前值,闪烁填充当前值。

    image.png

    动态属性描述

    属性名称(key) 类型 可绑定 可运行时更新
    填充颜色(fill) color yes yes
    线条颜色(stroke) color yes yes
    上一篇
    模式切换
    下一篇
    图表