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}]}]
};