echarts绘制圆环型进度条，圆环形比例图

效果：

代码：（图表中间的文字可以使用label或自己写html元素）

<script src="./echarts.min.js"></script>
<script>
  let option =  {
    animation: true,
    series: [{
      type: 'gauge', // 仪表盘图
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 1,
      radius: '100%',
      center: ['50%','50%'],
      progress: { // 进度环
        roundCap: 'true',
        show: true,
        width: 8,
        itemStyle: {
          color: {
            type: 'linear',
            x:0, y: 0, x2: 0, y2: 1,
            colorStops: [{ //进度环的渐变色
              offset: 0, color: '#2ce385' // 0% 处的颜色
            }, {
              offset: 1, color: '#00b056' // 100% 处的颜色
            }]
          }
        }
      },
      axisLine: { // 背景环
        roundCap: 'true',
        lineStyle: {
          width: 8,
          color: [ [0,'#CCEFDD'],[1,'#CCEFDD'] ]
        }
      },
      pointer: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      detail: { show: false },
      data: [{
        value: 0.25 // 进度值，最高为1
      }]
    }]
  }
  echarts.init(document.querySelector('.chart1_chart')).setOption(option);
</script>