echarts 进度压力球

const dataArr = [{
  value: 80,
  name: '压力正常指数'
}];
const rich = {
  bule: {
    fontSize: 20,
    fontFamily: 'PangMenZhengDao-Regular, PangMenZhengDao',
    color: '#fff',
  },
  white: {
    fontSize: 15,
    fontFamily: 'PangMenZhengDao-Regular, PangMenZhengDao',
    color: '#fff',
  },
}
const meterOption2 = ref({
  series: [
    {
      type: 'gauge',
      name: '最外层圆环',
      radius: '85%',
      startAngle: '360',
      endAngle: '0',
      min: 0,
      max: 100,
      pointer: {
          show: false,
      },
      detail: {
          show: false,
      },
      data: [
          {
            value: 1,
          },
      ],
      axisLine: {
          show: true,
          lineStyle: {
              color: [[1, '#00FFFF']],
              width: 2,
              opacity: 1,
          },
      },
      axisTick: {
          show: false,
      },
      splitLine: {
          show: false,
          length: -44,
          lineStyle: {
              color: '#051932',
              width: 0,
              type: 'solid',
          },
      },
      axisLabel: {
          show: false,
      },
    },
    {//渐层色圆环
      type: 'gauge',
      radius: '78%',
      progress: {
          show: true,
          width: 6,
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0,0,1,0,[
          {
            offset: 0,
            color: "rgba(255, 168, 141, 0.3)",
          },
          {
            offset: 0.25,
            color: "rgba(243, 178, 11, 0.9)",
          },
          {
            offset: 0.5,
            color: "rgba(243, 65, 10, 0.9)",
          },
          {
            offset: 0.75,
            color: "rgba(68, 139, 255, 0.9)",
          },
          {
            offset: 1,
            color: "rgba(68, 139, 255, 0.9)",
          },
        ],false),
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
           width: 6,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        length: 2,
        // distance: -15,
        lineStyle: {
           width: 2,
           color: 'rgba(75, 114, 229, 0.5)',
        },
      },
      axisLabel: {
          show: false,
      },
      anchor: {
        show: false,
        showAbove: true,
        size: 15,
        itemStyle: {
          borderWidth: 5,
        },
      },
      title: {
        show: true,
        offsetCenter: [0, '100%'],
        textStyle: {
          fontSize: 14,
          color: '#fff',
        },
      },
      detail: {
          formatter: function(value:any) {
            return '{bule|' + value + '}{white|%}';
          },
          rich: rich,
          // valueAnimation: true,
          offsetCenter: [0, '2%'],
      },
      data: dataArr
    },
    {
      //内圆
      type: 'pie',
      radius: '56%',
      center: ['50%', '50%'],
      z: 1,
      animation:false,
      itemStyle: {
        normal: {
          color: new echarts.graphic.RadialGradient(0.5,0.5,0.8,[
            {
                offset: 0,
                color: '#4978EC',
            },
            {
                offset: 0.5,
                color: '#1E2B57',
            },
            {
                offset: 1,
                color: '#141F3D',
            },
          ],false),
          label: {
              show: false,
          },
          labelLine: {
              show: false,
          },
        },
      },
      hoverAnimation: false,
      label: {
          show: false,
      },
      tooltip: {
          show: false,
      },
      data: [100],
    },
  ]
});