[]
线条包括直线,贝塞尔曲线和折线三种。
在左侧的工具栏上,选择直线,贝塞尔曲线,或者折线,直接拖到设计器上。
直线和折线都包含了丰富的设置属性来控制图形外观,如下:
属性 | 描述 |
---|---|
边框颜色 | 直线以及折线的绘制颜色 |
边框宽度 | 直线以及折线的线条宽度 |
边框线型 | 直线以及折线的线型,支持实线和虚线 |
虚线间隔 | 线型为虚线时,定义间隔的大小 |
显示阴影 | 是否显示阴影 |
不透明度 | 设定图形的不透明度 |
起点箭头 | 是否显示起点箭头 |
终点箭头 | 是否显示终点箭头 |
圆角半径 | 折线转弯处的圆角半径设定 |
在设计器中直线,贝塞尔曲线和折线有两种状态,编辑态和非编辑态,在编辑态中可以灵活地调整线条的位置,形状,增加或者删除折线的子线条等等操作。
状态 | 进入或者退出方式 | 功能 | 示例 | |
---|---|---|---|---|
非编辑态 | 组件的默认状态 | 呈现组件 | ||
编辑态 | 进入方式:
退出方式:
|
|
直线在编辑状态包含2个控制点,这2个控制点来决定曲线的形状。
双击直线进入编辑状态,移动端点到指定位置,编辑完成后,点击空白区域,或者按下 ESC,Enter键退出编辑。
贝塞尔曲线在编辑状态包含4个控制点,这四个控制点来决定曲线的形状。
双击直线进入编辑状态,移动端点到指定位置,编辑完成后,点击空白区域,或者按下 ESC,Enter键退出编辑。
折线相对于直线来说,具有更多的控制点来控制折线的形状,下面介绍如何增加控制点以及删除控制点。
增加子线段,双击中间的控制点,会多出一个子线段,如右侧:
功能 | 操作 | 结果 |
---|---|---|
增加子线段 | ||
删除子线段 | ||
对齐端点 | 竖直方向对齐端点 A 和 B | 按下 Ctrl 键,鼠标移动A向左,当与B竖直对齐的时候, 会自动吸附,并且B点的圆圈变为实心。 |
基础形状支持了多种内置动画,包括闪烁,发光,流动,呼吸。
动画 | 示例 |
---|---|
闪烁 | |
发光 | |
流动 | |
轨迹 |
直线和折线的数据绑定上没有分类,只有单值的绑定,用户可以绑定很多个单值到组件上,来显示数据或者用户条件格式化。
选择目标数据集或者数据模型,直接拖拽字段到组件绑定区域,然后设定聚合方法。
条件格式化的字段来自于数据绑定:
数字类型和文本类型的字段具有不同的比较方法,与基础图表一致。
基础图形的条件格式化支持的样式属性包含三部分:基础样式,动画效果。
样式 | 描述 |
---|---|
基础样式 | |
动画效果 |