GaugeGraph

仪表盘基础组件。仪表盘是一种拟物化的图表,刻度表示度量,指针表示维度,指针角度表示数值。

使用场景

  • 适用于需要直观表现某指标的进度或实际情况的场景。仪表盘的好处在于它能跟人们的常识结合,使大家马上能理解看什么、怎么看。拟物化的方式使图标变得更友好更人性化,正确使用可以提升用户体验。

API

Attributes

仪表盘组件属性。

参数说明类型必选可选值默认值版本
boardData仪表盘需要显示的指标数据DashboardDataItem[]--版本
subBoardData仪表盘需要显示的副标题数据SubBoardData--版本
boardLineWidth仪表盘线条宽度number-10版本
startAngle仪表盘开始角度number-180版本
endAngle仪表盘结束角度number-0版本
center仪表盘圆心相对于容器的位置string[]-['50%', '70%']版本
bgLineColor仪表盘底线颜色string-#d9d9d9版本
showAxisTick是否显示刻度(线)booleantrue/falsefalse版本
showSplitLine是否显示刻度分段(线)booleantrue/falsetrue版本
showAxisLabel是否显示刻度标签(数字)booleantrue/falsefalse版本
showProgress仪表盘是否进度条booleantrue/falsetrue版本

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--版本