Slider
缩略轴
缩略轴
引入
import { Slider } from '@antv/gui';配置项
| Property | Description | Type | Default |
|---|---|---|---|
| orientation | Slider 朝向 | horizontal | vertical | horizontal |
| width | 宽度 | number | 200 |
| height | 高度 | number | 20 |
| values | 缩略轴范围 | [number, number] | [0, 1] |
| names | 手柄文本 | [string, string] | ['', ''] |
| min | 最小可滚动范围 | number | 0 |
| max | 最大可滚动范围 | number | 1 |
| sparkline | 缩略图配置 | SparklineOptions | [] |
| backgroundStyle | 自定义背景样式 | MixAttrs<RectProps> | [] |
| selectionStyle | 自定义选区样式 | MixAttrs<RectProps> | [] |
| handle | 手柄配置 | handleCfg | {start: handleCfg;end:handleCfg} | [] |
SparklineOptions
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | sparkline 类型 | line | bar | default |
| width | 宽度 | number | 200 |
| height | 高度 | number | 20 |
| data | 数据 | number[] | number[][] | [] |
| isStack | 是否堆积 | boolean | false |
| color | 颜色 | color | color[] | (index) => color | '#83daad', '#edbf45', '#d2cef9', '#e290b3', '#6f63f4'] |
| smooth | 平滑曲线 | boolean | true |
| lineStyle | 自定义线条样式 | LineProps | [] |
| areaStyle | 自定义线条填充样式 | PathProps | [] |
| isGroup | 是否分组 | boolean | false |
| columnStyle | 柱体样式 | RectProps | [] |
handleCfg
| Property | Description | Type | Default |
|---|---|---|---|
| show | boolean | 是否显示手柄 | true |
| size | number | 手柄图标大小 | 10 |
| formatter | (name, value)=>string | 文本格式化 | [] |
| textStyle | TextProps | 文字样式 | [] |
| spacing | number | 文字与手柄的间隔 | 10 |
| handleIcon | (x,y,r)=>PathCommand | string | 手柄图标，支持image URL、data URL、Symbol Name、 Symbol Function | [] |
| handleStyle | MixAttrs<ImageProps | PathProps> | 手柄图标样式 | [] |
ShapeAttrs
基本属性
| 属性名 | 类型 | 描述 |
|---|---|---|
| x | number | x 坐标 |
| y | number | y 坐标 |
| r | number | 半径 |
| width | number | 宽度 |
| height | number | 高度 |
| stroke | color | 描边颜色，可以是 rgba 值、颜色名（下同） |
| strokeOpacity | number | 描边透明度 |
| fill | color | 填充颜色 |
| fillOpacity | number | 填充透明度 |
| Opacity | number | 整体透明度 |
| shadowBlur | number | 模糊效果程度 |
| shadowColor | color | 阴影颜色 |
| shadowOffsetX | number | 阴影水平偏移距离 |
| shadowOffsetY | number | 阴影垂直偏移距离 |
线条属性
| 属性名 | 类型 | 描述 |
|---|---|---|
| lineWidth | number | 线条或图形边框宽度 |
| lineCap | 'butt' | 'round' | 'square' | 线段末端样式 |
| lineJoin | 'bevel' | 'round' | 'miter' | 设置 2 个长度不为 0 的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略） |
| lineDash | number[] | null | 线条或图形边框的虚线样式 |
文本属性
| 属性名 | 类型 | 描述 |
|---|---|---|
| textAlign | 'start' | 'center' | 'end' | 'left' | 'right' | 设置文本内容的当前对齐方式 |
| textBaseline | 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom' | 设置在绘制文本时使用的当前文本基线, |
| fontStyle | 'normal' | 'italic' | 'oblique' | 设置字体样式 |
| fontSize | number | 设置字号 |
| fontFamily | string | 设置字体系列 |
| fontWeight | 'normal' | 'bold' | 'bolder' | 'lighter' | number | 设置字体的粗细 |
| fontVariant | 'normal' | 'small-caps' | string | 设置字体变体 |
| lineHeight | number | 设置行高 |