echarts进度环

实现效果一：

let tips = 20
option = {
        title: [
          {
            text: tips * 1 + '%',
            x: "center",
            y: "center",
            textStyle: {
              color: '#F65858',
              fontSize: 20
            }
          }
        ],
        series: [
          {
            type: "pie",
            radius: ['50%','65%'],
            center: ["50%", "50%"],
            hoverAnimation: false,
            color: '#ffffff',
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: tips,
                itemStyle: {
                  normal: {
                    color: '#F65858',
                    shadowBlur: 10,
                    shadowColor: '#F65858'
                  }
                }
              },
              {
                value: 100 - tips
              }
            ]
          }
        ]

      }

实现效果二

option = {
        title: {
          text: '内资',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 18
          },
          // 	subtext: '总分：100分',
          subtextStyle: {
            color: '#909090',
          },
          itemGap: -10, // 主副标题距离
          left: 'center',
          top: 'center'
        },

        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '170%' //图形大小
        },
        series: [{ // 灰色环
          type: 'bar',
          data: [{
            value: 100,
            itemStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 5,
              shadowOffsetY: 2
            }
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 13,
          barGap: '-100%', // 两环重叠
          z: 1
        }, {
          type: 'bar',
          data: [{
            name: '',
            value: 50,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: this.id === 'out' ? '#4E8CFA' : '#00FFFF'
                }, {
                  offset: 1,
                  color: this.id === 'out' ? '#3DF9DF' : '#C0FF00'
                }])
              }
            },
          }],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 13,
          barGap: '-100%', // 两环重叠
          z: 2,
        }]
      }