覆盖主要内容
版本: 下个版本

箭头标绘

箭头标绘是素材组件的一种，支持为可视化应用或可视化应用的某个模块添加自定义样式的箭头元素，能够使可视化应用展示更加美观。本文介绍箭头标绘各配置项的含义。

配置​

基础属性：包含组件的基础属性​

参数说明
图表宽度组件的宽度
图表高度组件的高度
横坐标组件的横坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离
纵坐标组件的纵坐标，单位为px。横坐标为组件左上角距离页面上边界的像素距离
旋转角度以组件的中心为中心点，进行旋转，单位为度（°）
透明度取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1

线样式：箭头标绘中线条的样式​

参数说明
左侧高度比例组件左侧线条端占组件边框高度的比例值，取值范围在0~1之间，比例越大线条端点越低
右侧高度比例组件右侧线条端占组件边框高度的比例值，取值范围在0~1之间，比例越大线条端点越低
线型线条曲线的样式
弧线粗细线条弧线的粗细值，取值范围在0~20之间，单位为px。数值越大弧线越粗
端点形状线条中的端点的形状选择，可选，包括round和butt
虚线线条中端点和端点之间的间隔组成的虚线样式
动画方向线条的动画走向，可选，包括向左和向右
虚线速度虚线的运动速度，取值范围在0~300之间，取值越大，速度越快
填充颜色线条的填充颜色

箭头样式：箭头标绘中箭头的样式​

参数说明
显示左箭头打开开关，显示左侧箭头样式；关闭开关，隐藏左侧箭头样式
显示右箭头打开开关，显示右侧箭头样式；关闭开关，隐藏右侧箭头样式
宽度箭头的宽度值，取值范围在0~100之间，单位为px。取值越大，箭头宽度越大
高度箭头的高度值，取值范围在0~100之间，单位为px。取值越大，箭头高度越大
填充颜色箭头的填充颜色

文本样式：箭头标绘中文本的样式​

参数说明
显示打开开关，显示文本样式 ；关闭开关，隐藏文本样式
文字位置文本文字的摆放样式，可选，包括文字在上和文字在下
文字与线间隔文字与线之间的平行距离，取值范围为0~100，单位为px。数值越大，间隔距离越大
动画方向文本动画播放的方向，可选，包括向左向右
动画时间间隔文字播放完一遍动画的时间，取值范围为0~10之间，单位为秒。数值越大，动画播放一圈所用的时间越长
字体字体的样式，默认微软雅黑
字号文本的字号大小
字体颜色文本的字体颜色
字体粗细字体的粗细

数据​

上图中的示例数据如下：

[
    {
        "content": "箭头标绘文字",
        "alink": "http://www.uniplore.cn",
        "textAnimate": true,
        "lineAnimate": true
    }
]

表1. 字段说明

字段说明
content箭头标绘组件中文字部分的内容
alink箭头标绘组件对文字部分设置的超链接网址
textAnimate箭头标绘组件中的文字动画，true表示开启动画；false表示关闭动画
lineAnimate箭头标绘组件中的虚线动画，true表示开启动画；false表示关闭动画

表2. 配置项说明

配置项说明
受控模式打开开关，组件初始化状态下不请求数据，仅通过回调ID或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据
自动更新请求选中后可以设置动态轮询，还可以手动输入轮询的时间频次。清除后则不会自动更新，需要手动刷新页面，或通过蓝图编辑器和回调ID事件来触发请求更新数据
数据模型
静态数据

交互​

此组件没有交互配置

蓝图编辑器交互配置​

  1. 在画布编辑器页面，右键单击组件，选择导出到蓝图编辑器。
  2. 单击页面左上角的 图标。
  3. 在蓝图编辑器配置页面，单击导入节点栏内的箭头标绘组件，在画布中可以看到如下图所示的箭头标绘的蓝图编辑器配置参数。

事件​

当数据请求完成时 数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据请参见上文的数据示例。

动作​

动作
说明
请求数据接口重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如箭头标绘配置了API数据源为[http://api.test](http://api.test)，传到请求数据接口动作的数据为{ id: '1'}，则最终请求接口为[http://api.test?id=1](http://api.test?id=1)
导入数据接口按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据示例
更新组件配置动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值
显示显示组件，不需要参数
隐藏隐藏组件，不需要参数
切换显隐状态切换组件显示或者隐藏
移动将组件移动到指定位置。{// 移动方式。绝对定位：to，相对定位：by。默认值：to。"positionType": "to",// 指定位置。x坐标，y坐标。"attr": {"x": 0,"y": 0},// 动画方式。"animation": {"enable": false,// 动画延时。"animationDuration": 1000,// 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。"animationEasing": "linear"}}
最后一次更新 更新于