话不多说先上图：

echarts代码：

option = {
  backgroundColor: '#0f164a', \\ 背景
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  label: {
    show: true,
    position: 'top'
  },
  legend: {
    data: ['line', 'bar'],
    textStyle: {
    	color: '#ccc'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
      	color: '#fff'
      }
    },
  axisLine: {
  //x轴线的颜色以及宽度
    show: true,
    lineStyle: {
      color: '#0e96b0',
      width: 1,
      type: 'solid'
    }
  },
  splitLine: {
  //分割线配置
    show: false,
    lineStyle: {
    	color: '#fff'
    }
  },
  data: ['FSAPP1', 'FSAPP2', 'FSAPP3', 'FSAPP4'] 
  },
  yAxis: {
    axisLine: {
    //x轴线的颜色以及宽度
    show: true,
    lineStyle: {
      color: '#0e96b0',
      width: 1,
      type: 'solid'
    }
  },
  type: 'value',
  axisLabel: {
    textStyle: {
    	color: '#fff'
    }
  },
  splitLine: {
  //分割线配置
    lineStyle: {
    	color: '#014294'
    }
  }
  },
  series: [
    {
      name: 'line',
      type: 'bar',
      barGap: '-100%',
      barWidth: 15,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#003792' },
          { offset: 0.5, color: '#036aa4' },
          { offset: 1, color: '#08c9c4' }
        ])
      },
      z: 10,
      data: [10, 243, 16, 86]
    },
    {
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
      	color: '#0f164a'
      },
      label: {
        show: false,
        position: 'top'
      },
      symbolRepeat: true,
      symbolSize: [16, 2],
      symbolMargin: 3,
      z: 12,
      data: [10, 243, 16, 86]
    }
  ]
};

echarts代码：

option = {
    color: ["#fdfad7", "#f8ee75"],
    series: [
      {
        type: "pie",
        radius: [25, 60],// [内圈大小，外圈大小]
        left: "center",
        width: "150%",
        height: "100%",
        itemStyle: {
          borderColor: "#d6c52d", // 边框色
          borderWidth: 1, // 边框宽度
        },
        label: {
          alignTo: "edge",
          formatter: "{time|{c} 小时}\n{name|{b}} ",
          edgeDistance: 10,
          lineHeight: 15,
          minMargin: 4,
          rich: {
            time: {
              fontSize: 10,
              color: "#fff",
            },
            name: {
              color: "#ffe112",
              fontSize: 14,
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 10,
          maxSurfaceAngle: 80,
        },
        data: [
          { 
              name: "**不正常率", 
              value: 1, 
              title: "什么什么架次", 
              num: 3,
              itemStyle:{
                 color:new echarts.graphic.RadialGradient(0.5, 0.5, 0.6, [
                    { offset: 0, color: "#e3c91c" },
                    { offset: 0.5, color: "#f7f293" },
                    { offset: 1, color: "#e3c91c" },
                  ])
              } 
          },
          {
            name: "**正常率",
            value: 5.6,
            title: "什么什么架次",
            num: 234,
            itemStyle:{
                color: '#f00'
            }
          },
        ],
      },
    ],
  }

css圆环：

如果只是需要做一个纯圆环的话，可以用简单的一个元素的边框生成，给元素的圆角border-radius属性设置为50%即可，下面为代码：

 <div class="circle"></div>

.circle{
  width: 200px;
  height: 200px;
  border: 20px solid rgb(0, 166, 255);
  border-radius: 50%;
}

如果需求中需要我们的圆环为渐变，可以使用遮罩mask属性、如果说需求中我们的圆环内部不是必须为透明的话也可以使用小元素遮盖大元素内心实现圆环效果，代码如下：

使用mask属性：

先使用背景的圆锥渐变conic-gradient属性值设置元素渐变：

然后使用mask属性遮罩元素内心，得到如图所示圆环：

代码：

<div class="circle"></div>

.circle{
	width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, #f00, #0f0);
  mask: radial-gradient(transparent 80px, #fff 80px);
  -webkit-mask: radial-gradient(transparent 80px, #fff 80px);
}

使用小元素遮盖大元素内心:

使用小元素覆盖大元素内心即为，大元素设置为一个渐变的圆形，小元素定位到大元素中心，背景设置为与外元素相同的背景：

代码：

<div class="circle">
        <div class="small-circle"></div>
</div>

.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative; 
    background: conic-gradient(from 0deg at 50% 50%, #f00, #0f0);
}

.small-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

二者的区别：用mask属性的内心空白处的颜色是跟外元素的背景一致的，使用小元素覆盖的圆环内心空白处跟外元素的背景不一致,把外元素设置背景即可看到明显差异：