{{ target: series-gauge }}
仪表盘
示例: ~600x500
{{ use: partial-component-id( prefix = “#” ) }}
{{ use: partial-series-name() }}
{{ use: component-circular-layout() }}
仪表盘半径,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
{{ use: partial-legend-hover-link() }}
仪表盘起始角度。圆心 正右手侧为0
度,正上方为90
度,正左手侧为180
度。
仪表盘结束角度。
仪表盘刻度是否是顺时针增长。
{{ use: partial-1d-data-desc() }}
{{ use: partial-gauge-title-detail( prefix = “##” ) }}
数据项名称。
数据值。
数据项的指针样式。
{{ use: partial-item-style( prefix = “###”, useDecal = true ) }}
最小的数据值,映射到 minAngle。
最大的数据值,映射到 maxAngle。
仪表盘刻度的分割段数。
仪表盘轴线相关配置。
是否显示仪表盘轴线。
{{ use: partial-version( version = “5.0.0” ) }}
是否在两端显示成圆形。
仪表盘轴线样式。
仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
默认取值:
[[1, '#E6EBF8']]
轴线宽度。
{{ use: partial-style-shadow-opacity( prefix = “###” ) }}
{{ use: partial-version( version = “5.0” ) }}
展示当前进度。
是否显示进度条。
多组数据时进度条是否重叠。
进度条宽度。
是否在两端显示成圆形。
是否裁掉超出部分。
进度条样式。
{{ use: partial-item-style( prefix = “###” ) }}
分隔线样式。
是否显示分隔线。
分隔线线长。支持相对半径的百分比。
{{ use: partial-version( version = “5.0” ) }}
分隔线与轴线的距离。
{{ use: partial-line-style( prefix = ‘###’, defaultColor = ‘#63677A’, defaultWidth = 3, defaultType = “‘solid’” ) }}
刻度样式。
是否显示刻度。
分隔线之间分割的刻度数。
刻度线长。支持相对半径的百分比。
{{ use: partial-version( version = “5.0” ) }}
刻度线与轴线的距离。
{{ use: partial-line-style( prefix = ‘###’, defaultColor = ‘#63677A’, defaultWidth = 1, defaultType = “‘solid’” ) }}
刻度标签。
是否显示标签。
标签与刻度线的距离。
刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:
// 使用字符串模板,模板变量为刻度默认标签 {value} formatter: '{value} kg' // 使用函数模板,函数参数分别为刻度数值 formatter: function (value) { return value + 'km/h'; }
{{ use: partial-text-style( prefix = “##”, noAlign = true, noVerticalAlign = true, defaultColor = “‘#464646’” ) }}
仪表盘指针。
是否显示指针。
{{ use: partial-version( version = “5.2.0” ) }}
指针是否显示在标题和仪表盘详情上方。
{{ use: partial-version( version = “5.0” ) }}
{{ use: partial-icon() }}
{{ use: partial-version( version = “5.0” ) }}
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
指针长度,可以是绝对数值,也可以是相对于半径的半分比。
指针宽度。
{{ use: partial-version( version = “5.0” ) }}
如果图标是 path://
的形式,是否在缩放时保持该图形的长宽比。
指针样式。
{{ use: partial-item-style( prefix = “###” ) }}
{{ use: partial-version( version = “5.0” ) }}
表盘中指针的固定点。
是否显示固定点。
固定点是否显示在指针上面。
固定点大小。
{{ use: partial-icon() }}
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
如果图标是 path://
的形式,是否在缩放时保持该图形的长宽比。
指针固定点样式。
{{ use: partial-item-style( prefix = “###”, defaultColor = “‘#fff’” ) }}
固定点边框颜色。
仪表盘指针样式。
{{ use: partial-item-style( prefix = “##”, useDecal = true ) }}
指针颜色,默认取数值所在的区间的颜色。
高亮的仪表盘指针样式
{{ use: partial-item-style( prefix = “###” ) }}
{{ use: partial-gauge-title-detail( prefix = “#” ) }}
{{ use: partial-marker( prefix = “#”, seriesType = “gauge” ) }}
{{ use: partial-silent( prefix = “#” ) }}
{{ use: partial-animation( prefix = “#” ) }}
{{ use: partial-tooltip-in-series() }}
{{ target: partial-gauge-title-detail }}
#${prefix} title(Object)
仪表盘标题。
##${prefix} show(boolean) = true
是否显示标题。
##${prefix} offsetCenter(Array) = [0, ‘20%’]
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
{{ use: partial-text-style( prefix = ${prefix} + ‘#’, defaultColor = “‘#464646’”, defaultFontSize = 16, noAlign = true, noVerticalAlign = true ) }}
##${prefix} valueAnimation(boolean) = true
{{ use: partial-version( version = “5.0.0” ) }}
是否开启标签的数字动画。
#${prefix} detail(Object)
仪表盘详情,用于显示数据。
##${prefix} show(boolean) = true
是否显示详情。
{{ use: partial-text-style( prefix = ${prefix} + ‘#’, defaultColor = “‘#464646’”, defaultFontSize = 30, defaultFontWeight = “‘bold’”, defaultLineHeight = 30, noAlign = true, noVerticalAlign = true ) }}
##${prefix} valueAnimation(boolean) = true
{{ use: partial-version( version = “5.0.0” ) }}
是否开启标签的数字动画。
##${prefix} width(number) = 100
详情宽度。
##${prefix} height(number) = 40
详情高度。
##${prefix} color(Color) = ‘#464646’
文本颜色,默认取数值所在的区间的颜色。
##${prefix} backgroundColor(Color) = ‘transparent’
详情背景色。
##${prefix} borderWidth(number) = 0
详情边框宽度。
##${prefix} borderColor(Color) = ‘#ccc’
详情边框颜色。
##${prefix} offsetCenter(Array) = [0, ‘40%’]
相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
##${prefix} formatter(Function|string)
格式化函数或者字符串
formatter: function (value) { return value.toFixed(0); }