仪表盘

外盘的样式、位置、刻度

• startAngle 和 endAngle: 控制外盘的形状
• center 和 radius: 控制位置
• min 和 max: 控制刻度的数值
• splitNumber: 控制了刻度间隔，而不是每过splitNumber展示数值，用来调整数值的展示
• axisLine: 控制表盘最外面的弧线的样式
• axisLabel: 刻度文字的样式
• axisTick: 小刻度线的样式
• splitLine: 大刻度线的样式
• progress: 指针的样式，默认就可以忽略
• detail: 指针下方的文本，detail中的formatter回调中可以获取data的value
• data: 指针所在位置，可以动态改变

配置项

type:'gauge',
startAngle: 230,
endAngle: -50,
center: ['50%', '55%'],
radius: '90%',
min: 0,
max: 220,
splitNumber: 11, // 刻度间隔
axisLine: {
  lineStyle: {
    width: 6,
    color: [ // 只能用小数点来控制颜色的百分比
      [0.10, '#7CFFB2'],
      [0.80, '#58D9F9'],
      [1, '#FF6E76']
    ],
    shadowBlur: 10,
    shadowColor: 'rgba(255,255,255,0.5)'
  }
},
axisLabel: {
  color: 'white',
  distance: 15,
  fontSize: 12,
  fontWeight: 'bold'
},
axisTick: { // 小刻度
  length: 12,
  lineStyle: {
    color: 'auto',
    width: 1,
    shadowBlur: 10,
    shadowColor: 'rgba(255,255,255,0.5)'
  }
},
splitLine: { // 大刻度
  length: 20,
  lineStyle: {
    color: 'rgba(255,255,255,1)',
    width: 2,
    shadowBlur: 10,
    shadowColor: 'rgba(255,255,255,0.5)'
  },
},
detail: { // 展示
  fontSize: 20,
  offsetCenter: [0, '40%'],
  valueAnimation: true,
  formatter: function (value) {
    return `km/h\n${value.toFixed(2)}` // 数值保留两位小数
  },
  color: 'rgba(255,255,255)'
},
data: [
  {
    name: '',
    value: 0,
  }
]