箭头标绘是素材组件的一种,支持为大屏或大屏的某个模块添加自定义样式的箭头元素,能够使大屏展示更加美观。本文档为您介绍箭头标绘各配置项的含义,帮助您快速准确地使用箭头标绘组件。

配置

  • 线样式:箭头标绘中线条的样式。
    箭头标绘线条样式
    • 左侧高度比例:组件左侧线条端占组件边框高度的比例值,取值范围在0到1之间,比例越大线条端点越低。
    • 右侧高度比例:组件右侧线条端占组件边框高度的比例值,取值范围在0到1之间,比例越大线条端点越低。
    • 弧线粗细:线条弧线的粗细值,取值范围在0到20之间,单位为px。数值越大弧线越粗。
    • 线型:线条曲线的样式。
    • 端点形状:线条中的端点的形状选择,可选,包括roundbutt
    • 虚线:线条中端点和端点之间的间隔组成的虚线样式。
    • 动画方向:线条的动画走向,可选,包括向左向右
    • 虚线速度:虚线的运动速度,取值范围在0到300之间,取值越大,速度越快。
    • 填充颜色:线条的填充颜色,可参考颜色选择器说明进行修改。
  • 箭头样式:箭头标绘中箭头的样式。
    箭头标绘箭头样式
    • 显示左箭头:勾选后,显示左侧箭头样式;去勾选,隐藏左侧箭头样式。
    • 显示右箭头:勾选后,显示右侧箭头样式;去勾选,隐藏右侧箭头样式。
    • 宽度:箭头的宽度值,取值范围在0到100之间,单位为px。取值越大,箭头宽度越大。
    • 高度:箭头的高度值,取值范围在0到100之间,单位为px。取值越大,箭头高度越大。
    • 填充颜色:箭头的填充颜色,可参考颜色选择器说明进行修改。
  • 文本样式:箭头标绘中文本的样式。
    箭头标绘文本样式
    • 显示:勾选后,显示文本样式 ;去勾选,隐藏文本样式。
    • 文字位置:文本文字的摆放样式,可选,包括文字在上文字在下
    • 文字与线间隔:文字与线之间的平行距离,取值范围为0到100,单位为px。数值越大,间隔距离越大。
    • 动画方向:文本动画播放的方向,可选,包括向左向右
    • 动画时间间隔:文字播放完一遍动画的时间,取值范围为0到10之间,单位为秒。数值越大,动画播放一圈所用的时间越长。
    • 字号:文本的字号大小。
    • 字体颜色:文本的字体颜色,可参考颜色选择器说明进行修改。
    • 字体粗细:字体的粗细。
    • 字体:字体的样式,默认微软雅黑。

数据


箭头标绘数据面板

上图中的示例数据如下:

[ 
 {   
   "content": "箭头标绘文字",    
   "alink": "https://data.aliyun.com/visual/datav?spm=5176.8142029.388261.171.563b6d3elq2EPo",    
   "textAnimate": true,    
   "lineAnimate": true  
 }
]
  • content:箭头标绘组件中文字部分的内容。
  • alink:箭头标绘组件对文字部分设置的超链接网址。
  • textAnimate:箭头标绘组件中的文字动画,true表示开启动画;false表示关闭动画。
  • lineAnimate:箭头标绘组件中的虚线动画,true表示开启动画;false表示关闭动画。
表 1. 配置项说明
配置项 说明
自动更新请求 勾选后可以设置动态轮询,还可以手动输入轮询的时间频次。
数据源 单击配置数据源,可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据
数据过滤器 单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见组件过滤器使用说明
数据响应结果 展示数据请求的响应结果。当数据源发生改变时,可单击右侧的刷新图标,实时查看数据响应结果。

交互

此组件没有交互事件。