GaugeGraph
仪表盘基础组件。仪表盘是一种拟物化的图表,刻度表示度量,指针表示维度,指针角度表示数值。
使用场景
- 适用于需要直观表现某指标的进度或实际情况的场景。仪表盘的好处在于它能跟人们的常识结合,使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化,正确使用可以提升用户体验。
API
Attributes
仪表盘组件属性。
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 | 版本 |
---|
boardData | 仪表盘需要显示的指标数据 | DashboardDataItem[] | 是 | - | - | 版本 |
subBoardData | 仪表盘需要显示的副标题数据 | SubBoardData | 否 | - | - | 版本 |
boardLineWidth | 仪表盘线条宽度 | number | 否 | - | 10 | 版本 |
startAngle | 仪表盘开始角度 | number | 否 | - | 180 | 版本 |
endAngle | 仪表盘结束角度 | number | 否 | - | 0 | 版本 |
center | 仪表盘圆心相对于容器的位置 | string[] | 否 | - | ['50%', '70%'] | 版本 |
bgLineColor | 仪表盘底线颜色 | string | 否 | - | #d9d9d9 | 版本 |
showAxisTick | 是否显示刻度(线) | boolean | 否 | true/false | false | 版本 |
showSplitLine | 是否显示刻度分段(线) | boolean | 否 | true/false | true | 版本 |
showAxisLabel | 是否显示刻度标签(数字) | boolean | 否 | true/false | false | 版本 |
showProgress | 仪表盘是否进度条 | boolean | 否 | true/false | true | 版本 |
DashboardDataItem
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 | 版本 |
---|
label | 每项数据的标签 | string | 是 | - | - | 版本 |
value | 每项数据的数值 | number | string | 是 | - | - | 版本 |
color | 数据的指针颜色 | string | 是 | - | - | 版本 |
key | 每项数据的指标 | string | 否 | - | - | 版本 |
maxValue | 数据的参考最大值 | number | string | 否 | - | - | 版本 |
formatValue | 数据的格式化 | function | 否 | - | - | 版本 |
titleOffsetCenter | 数据的标题位置 | string[] | 否 | - | - | 版本 |
detailOffsetCenter | 数据的数值位置 | string[] | 否 | - | - | 版本 |
titleColor | 数据的标题颜色 | string | 否 | - | - | 版本 |
detailColor | 数据的数值颜色 | string | 否 | - | - | 版本 |
SubBoardData
参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 | 版本 |
---|
label | 每项数据的标签 | string | 是 | - | - | 版本 |
value | 每项数据的数值 | string | 是 | - | - | 版本 |
maxValue | 数据的参考最大值 | number | string | 是 | - | - | 版本 |
formatValue | 数据的格式化 | function | 否 | - | - | 版本 |