请问如何实现双层仪表盘

整理下思路 从图形上面来看的话应该是两条数据线，调试数据，然后就可以起两个 series
大体捋了捋可以这样去写，设置两个series 红线占内圈，蓝线占外圈，搭配两个小三角，svg path调试一下，调整一下偏移量等

option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      radius: '50%',
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 12,
      itemStyle: {
        color: '#ff1b1b',
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      progress: {
        show: true,
        roundCap: true,
        width: 18
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-70%'],
        itemStyle: {
          color: '#ff1b1b'
        }
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false,
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        show: false,
        length: 12,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        show: false,
        distance: 30,
        color: '#999',
        fontSize: 20
      },
      title: {
        show: false
      },
      detail: {
        fontSize: 20,
        offsetCenter: [0, '-50'],
        valueAnimation: true,
        formatter: function (value) {
          return value.toFixed(1) + '%';
        },
        color: '#ff1b1b'
      },

      data: [
        {
          value: 75.0
        }
      ]
    },
    {
      type: 'gauge',
      radius: '52%',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 12,
      itemStyle: {
        color: '#2196f3'
      },
      progress: {
        show: true,
        roundCap: true,
        width: 2
      },
      pointer: {
        icon: 'path://M-11,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-110%'],
        itemStyle: {
          color: '#ddd'
        }
      },
      axisLine: {
        show: false,
        roundCap: true
      },
      axisTick: {
        show: false,
        splitNumber: 2,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        show: false,
        length: 12,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        show: false,
        distance: 30,
        color: '#999',
        fontSize: 20
      },
      // title: {
      //   offsetCenter: [0, '-20%'],
      //   fontSize: 30
      // },
      detail: {
        fontSize: 20,
        offsetCenter: [0, '-16'],
        valueAnimation: true,
        formatter: function (value) {
          return '预算使用率';
        },
        color: '#999'
      },
      data: [
        {
          value: 80
        }
      ]
    }
  ]
};

效果图

你可以在搭配title也好，自己定义盒子将时间进度、全年预算补充上 设置一个文本居中