Charts

series[i] ({type: 'gauge', ...})

将series子元素的type属性配置为gauge，即可使用仪表盘。

show

/**
 * @description 是否显示该仪表盘
 * @type {Boolean}
 * @default show = true
 */

name

/**
 * @description 图例标签名
 * @type {String}
 * @default name = ''
 */

center

/**
 * @description 仪表盘中心点
 * @type {Array}
 * @default center = ['50%','50%']
 * @example center = ['50%','50%'] | [100, 100]
 */

radius

/**
 * @description 仪表盘半径
 * @type {String|Number}
 * @default radius = '60%'
 * @example radius = '60%' | 100
 */

startAngle

/**
 * @description 仪表盘起始角度（弧度值）
 * @type {Number}
 * @default startAngle = -(Math.PI / 4) * 5
 * @example startAngle = -Math.PI
 */

endAngle

/**
 * @description 仪表盘结束角度（弧度值）
 * @type {Number}
 * @default endAngle = Math.PI / 4
 * @example endAngle = 0
 */

min

/**
 * @description 仪表盘最小值
 * @type {Number}
 * @default min = 0
 */

max

/**
 * @description 仪表盘最大值
 * @type {Number}
 * @default max = 100
 */

splitNum

/**
 * @description 仪表盘分隔数目
 * @type {Number}
 * @default splitNum = 5
 */

arcLineWidth

/**
 * @description 仪表盘圆弧线条宽度
 * @type {Number}
 * @default arcLineWidth = 15
 */

dataItemStyle

/**
 * @description Data元素构成的圆弧的默认样式
 * @type {Object}
 * @default dataItemStyle = {Class Style的配置项}
 */

data

/**
 * @description 构成仪表盘的圆弧的数据
 * @type {Array}
 * @default data = []
 */

data[i].name

/**
 * @description 构成仪表盘的圆弧的名称
 * @type {Number}
 * @example name = 'name'
 */

data[i].value

/**
 * @description 构成仪表盘的圆弧的值
 * @type {Number}
 * @example value = 66
 */

data[i].radius

/**
 * @description 构成仪表盘的圆弧的半径 (默认与根属性radius的值相同)
 * @type {String|Number}
 * @example radius = '50%' | 150
 */

data[i].lineWidth

/**
 * @description 构成仪表盘的圆弧的线条宽度 (默认与根属性arcLineWidth的值相)
 * @type {Number}
 * @example lineWidth = 10
 */

data[i].gradient

/**
 * @description 构成仪表盘的圆弧的渐变色 (Hex|rgb|rgba)
 * @type {Array}
 * @example gradient = ['#000', 'rgb(10, 10, 10)', 'rgba(10, 10, 10, 1)']
 */

data[i].localGradient

/**
 * @description 渐变色是否应用局部渐变
 * @type {Boolean}
 * @default localGradient = false
 */

axisTick

/**
 * @description 坐标刻度配置项
 * @type {Object}
 */

axisTick.show

/**
 * @description 是否显示刻度
 * @type {Boolean}
 * @default show = true
 */

axisTick.tickLength

/**
 * @description 刻度线长度
 * @type {Number}
 * @default tickLength = 6
 */

axisTick.style

/**
 * @description 刻度线样式
 * @type {Object} {Class Style的配置项}
 */
axisTick.stype: {
  stroke: '#999',
  lineWidth: 1
}

axisLabel

/**
 * @description 坐标标签配置项
 * @type {Object}
 */

axisLabel.show

/**
 * @description 是否显示坐标标签
 * @type {Boolean}
 * @default show = true
 */

axisLabel.data

/**
 * @description 坐标标签的内容数据（可以自动计算）
 * @type {Array}
 * @default data = ['10', '20', ...]
 */

axisLabel.formatter

/**
 * @description 坐标标签内容格式
 * @type {String|Function}
 * @default formatter = null
 * @example formatter = '{value}%'
 * @example formatter = (labelItem) => (labelItem.value)
 */

axisLabel.labelGap

/**
 * @description 坐标标签与刻度线间的间隔
 * @type {String|Function}
 * @default labelGap = 5
 */

axisLabel.style

/**
 * @description 坐标标签样式
 * @type {Object}
 * @default style = {Configuration Of Class Style}
 */

pointer

/**
 * @description 仪表盘指针配置项
 * @type {Object}
 */

pointer.show

/**
 * @description 是否显示指针
 * @type {Boolean}
 * @default show = true
 */

pointer.valueIndex

/**
 * @description 指针从data中获取值的索引
 * @type {Number}
 * @default valueIndex = 0 (pointer.value = data[0].value)
 */

pointer.style

/**
 * @description 指针样式
 * @type {Object}
 * @default style = {Class Style的配置项}
 */
pointer.style: {
  // 可以调节scale的值放大缩小指针
  scale: [1, 1],
  fill: '#fb7293'
}

details

/**
 * @description Data子元素构成的圆弧的详情的配置项
 * @type {Object}
 */

details.show

/**
 * @description 是否显示详情
 * @type {Boolean}
 * @default show = false
 */

details.formatter

/**
 * @description 详情内容格式化
 * @type {String|Function}
 * @default formatter = null
 * @example formatter = '{value}%'
 * @example formatter = '{name}%'
 * @example formatter = (dataItem) => (dataItem.value)
 */

details.offset

/**
 * @description 详情内容位置偏移量
 * @type {Array}
 * @default offset = [0, 0]
 * @example offset = [10, 10]
 */

details.valueToFixed

/**
 * @description 数值小数精度
 * @type {Number}
 * @default valueToFixed = 0
 */

details.position

/**
 * @description 详情位置
 * @type {String}
 * @default position = 'center'
 * @example position = 'start' | 'center' | 'end'
 */

details.style

/**
 * @description 详情样式
 * @type {Object}
 * @default style = {Class Style的配置项}
 */
style: {
  fontSize: 20,
  fontWeight: 'bold',
  textAlign: 'center',
  textBaseline: 'middle'
}

backgroundArc

/**
 * @description 仪表盘背景圆弧配置
 * @type {Object}
 */

backgroundArc.show

/**
 * @description 是否显示背景环
 * @type {Boolean}
 * @default show = true
 */

backgroundArc.style

/**
 * @description 背景环样式
 * @type {Object}
 * @default style = {Class Style的配置项}
 */

rLevel

/**
 * @description 仪表盘渲染级别
 * 级别高者优先渲染
 * @type {Number}
 * @default rLevel = 10
 */

animationCurve

/**
 * @description 仪表盘缓动曲线
 * @type {String}
 * @default animationCurve = 'easeOutCubic'
 */

animationFrame

/**
 * @description 仪表盘缓动效果帧数
 * @type {Number}
 * @default animationFrame = 50
 */

←