series[i] ({type: ‘gauge’, …})

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

show

  1. /**
  2.  * @description 是否显示该仪表盘
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

name

  1. /**
  2.  * @description 图例标签名
  3.  * @type {String}
  4.  * @default name = ''
  5.  */

center

  1. /**
  2.  * @description 仪表盘中心点
  3.  * @type {Array}
  4.  * @default center = ['50%','50%']
  5.  * @example center = ['50%','50%'] | [100, 100]
  6.  */

radius

  1. /**
  2.  * @description 仪表盘半径
  3.  * @type {String|Number}
  4.  * @default radius = '60%'
  5.  * @example radius = '60%' | 100
  6.  */

startAngle

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

endAngle

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

min

  1. /**
  2.  * @description 仪表盘最小值
  3.  * @type {Number}
  4.  * @default min = 0
  5.  */

max

  1. /**
  2.  * @description 仪表盘最大值
  3.  * @type {Number}
  4.  * @default max = 100
  5.  */

splitNum

  1. /**
  2.  * @description 仪表盘分隔数目
  3.  * @type {Number}
  4.  * @default splitNum = 5
  5.  */

arcLineWidth

  1. /**
  2.  * @description 仪表盘圆弧线条宽度
  3.  * @type {Number}
  4.  * @default arcLineWidth = 15
  5.  */

dataItemStyle

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

data

  1. /**
  2.  * @description 构成仪表盘的圆弧的数据
  3.  * @type {Array}
  4.  * @default data = []
  5.  */

data[i].name

  1. /**
  2.  * @description 构成仪表盘的圆弧的名称
  3.  * @type {Number}
  4.  * @example name = 'name'
  5.  */

data[i].value

  1. /**
  2.  * @description 构成仪表盘的圆弧的值
  3.  * @type {Number}
  4.  * @example value = 66
  5.  */

data[i].radius

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

data[i].lineWidth

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

data[i].gradient

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

data[i].localGradient

  1. /**
  2.  * @description 渐变色是否应用局部渐变
  3.  * @type {Boolean}
  4.  * @default localGradient = false
  5.  */

axisTick

  1. /**
  2.  * @description 坐标刻度配置项
  3.  * @type {Object}
  4.  */

axisTick.show

  1. /**
  2.  * @description 是否显示刻度
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

axisTick.tickLength

  1. /**
  2.  * @description 刻度线长度
  3.  * @type {Number}
  4.  * @default tickLength = 6
  5.  */

axisTick.style

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

axisLabel

  1. /**
  2.  * @description 坐标标签配置项
  3.  * @type {Object}
  4.  */

axisLabel.show

  1. /**
  2.  * @description 是否显示坐标标签
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

axisLabel.data

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

axisLabel.formatter

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

axisLabel.labelGap

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

axisLabel.style

  1. /**
  2.  * @description 坐标标签样式
  3.  * @type {Object}
  4.  * @default style = {Configuration Of Class Style}
  5.  */

pointer

  1. /**
  2.  * @description 仪表盘指针配置项
  3.  * @type {Object}
  4.  */

pointer.show

  1. /**
  2.  * @description 是否显示指针
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

pointer.valueIndex

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

pointer.style

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

details

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

details.show

  1. /**
  2.  * @description 是否显示详情
  3.  * @type {Boolean}
  4.  * @default show = false
  5.  */

details.formatter

  1. /**
  2.  * @description 详情内容格式化
  3.  * @type {String|Function}
  4.  * @default formatter = null
  5.  * @example formatter = '{value}%'
  6.  * @example formatter = '{name}%'
  7.  * @example formatter = (dataItem) => (dataItem.value)
  8.  */

details.offset

  1. /**
  2.  * @description 详情内容位置偏移量
  3.  * @type {Array}
  4.  * @default offset = [0, 0]
  5.  * @example offset = [10, 10]
  6.  */

details.valueToFixed

  1. /**
  2.  * @description 数值小数精度
  3.  * @type {Number}
  4.  * @default valueToFixed = 0
  5.  */

details.position

  1. /**
  2.  * @description 详情位置
  3.  * @type {String}
  4.  * @default position = 'center'
  5.  * @example position = 'start' | 'center' | 'end'
  6.  */

details.style

  1. /**
  2.  * @description 详情样式
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */
  6. style: {
  7.   fontSize: 20,
  8.   fontWeight: 'bold',
  9.   textAlign: 'center',
  10.   textBaseline: 'middle'
  11. }

backgroundArc

  1. /**
  2.  * @description 仪表盘背景圆弧配置
  3.  * @type {Object}
  4.  */

backgroundArc.show

  1. /**
  2.  * @description 是否显示背景环
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

backgroundArc.style

  1. /**
  2.  * @description 背景环样式
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */

rLevel

  1. /**
  2.  * @description 仪表盘渲染级别
  3.  * 级别高者优先渲染
  4.  * @type {Number}
  5.  * @default rLevel = 10
  6.  */

animationCurve

  1. /**
  2.  * @description 仪表盘缓动曲线
  3.  * @type {String}
  4.  * @default animationCurve = 'easeOutCubic'
  5.  */

animationFrame

  1. /**
  2.  * @description 仪表盘缓动效果帧数
  3.  * @type {Number}
  4.  * @default animationFrame = 50
  5.  */