Echarts仪表盘图踩坑记录

Q：Echarts仪表盘图不支持自定义显示process的起止角度

A：

利用多图层实现

在官方示例Examples - Apache ECharts的基础上，修改第二图层，模拟实现process图层。

初始情况下，由于guage不支持自定义可显示的process.startAngle，根目录的startAngle是显示角度的配置，效果如下：

期望效果：从0开始往负数方向覆盖进度条。

实现：

1. 删除底层仪表盘的process配置，即不配置process字段
2. 将原第二仪表盘的process宽度增加到和底层一致为30

progress: {
  show: true,
  width: 30
}

3. 将第二仪表盘的最大值修改为当前0，此时data也修改为0，保证全量显示

max: 0,
data: [0]

4. 因为垂直方向数组为0，angle为90，因此设置endAngle为90
5. startAngle需要计算从0开始到所需刻度的角度，当前最小值为-60，角度为200，因此0到-20占角度的三分之一，计算公式为

90 + (20 / 60) * (200 - 90)

最终修改的配置如下

{
	progress: {
	  show: true,
	  width: 30
	},
	max: 0,
	data: {
          value: 0
  },
  startAngle: 90 + (20 / 60) * (200 - 90),
  endAngle: 90,
}

效果如图

最后附上全量配置

option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: -60,
      max: 60,
      splitNumber: 12,
      itemStyle: {
        color: '#FFAB91'
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      axisTick: {
        distance: -45,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 60,
        fontWeight: 'bolder',
        formatter: '{value} °C',
        color: 'inherit'
      },
      data: [
        {
          value: -20
        }
      ]
    },
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 90 + (20 / 60) * (200 - 90),
      endAngle: 90,
      min: -60,
      max: 0,
      itemStyle: {
        color: '#FD7347'
      },
      progress: {
        show: true,
        width: 30
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 0
        }
      ]
    }
  ]
};