echarts渐变圆环进度条样式

前提：还原UI设计稿

效果图：

开发工具：使用echarts在线代码编辑器完成样式 

实现思路：1、先实现一个渐变色的进度条；2、再实现一个白色背景分割线覆盖进度条

1、先实现一个渐变色的进度条

2、再实现一个白色背景分割线覆盖进度条，为了方便看效果，我这里设置的分割线的颜色是黑色

上效果：

上代码：

option = {
  title: {
    text: '总体进度',
    left: 'center',
    top: '40%',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 42
    }
  },
  series: [
    {
      z: 2,
      type: 'gauge',
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      // 仪表盘轴线相关配置
      axisLine: {
        show: false
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 分隔线样式
      splitLine: {
        show: false
      },
      // 展示当前进度
      progress: {
        show: true,
        width: 30,
        itemStyle: {
          // 渐变色
          color: {
            type: 'linear',
            x: 1,
            y: 1,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#d15874' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#9363c8' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}%',
        fontSize: 80,
        fontWeight: 'normal',
        offsetCenter: [0, '10%']
      },
      data: [
        {
          value: 83
        }
      ]
    },
    // 白色分割线
    {
      z: 3,
      type: 'gauge',
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      // 仪表盘轴线相关配置
      axisLine: {
        show: false
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 仪表盘刻度的分割段数
      splitNumber: 50,
      // 分隔线样式
      splitLine: {
        show: true,
        length: 40,
        distance: -15,
        lineStyle: {
          width: 10,
          // 背景是透明色的话 可能不太适用
          color: '#fff'
        }
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 100
        }
      ]
    }
  ]
};