echarts渐变圆环进度条样式

前提：还原UI设计稿
结果图：

开辟工具：使用echarts在线代码编辑器完成样式 
实现思绪：1、先实现一个渐变色的进度条；2、再实现一个白色背景分割线覆盖进度条
1、先实现一个渐变色的进度条

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

上结果：

上代码：

1. option = {
2.   title: {
3.     text: '总体进度',
4.     left: 'center',
5.     top: '40%',
6.     textStyle: {
7.       fontWeight: 'normal',
8.       fontSize: 42
9.     }
10.   },
11.   series: [
12.     {
13.       z: 2,
14.       type: 'gauge',
15.       // 刻度样式
16.       axisTick: {
17.         show: false
18.       },
19.       // 刻度标签
20.       axisLabel: {
21.         show: false
22.       },
23.       // 仪表盘轴线相关配置
24.       axisLine: {
25.         show: false
26.       },
27.       // 仪表盘指针
28.       pointer: {
29.         show: false
30.       },
31.       // 分隔线样式
32.       splitLine: {
33.         show: false
34.       },
35.       // 展示当前进度
36.       progress: {
37.         show: true,
38.         width: 30,
39.         itemStyle: {
40.           // 渐变色
41.           color: {
42.             type: 'linear',
43.             x: 1,
44.             y: 1,
45.             x2: 0,
46.             y2: 1,
47.             colorStops: [
48.               {
49.                 offset: 0,
50.                 color: '#d15874' // 0% 处的颜色
51.               },
52.               {
53.                 offset: 1,
54.                 color: '#9363c8' // 100% 处的颜色
55.               }
56.             ],
57.             global: false // 缺省为 false
58.           }
59.         }
60.       },
61.       detail: {
62.         valueAnimation: true,
63.         formatter: '{value}%',
64.         fontSize: 80,
65.         fontWeight: 'normal',
66.         offsetCenter: [0, '10%']
67.       },
68.       data: [
69.         {
70.           value: 83
71.         }
72.       ]
73.     },
74.     // 白色分割线
75.     {
76.       z: 3,
77.       type: 'gauge',
78.       // 刻度样式
79.       axisTick: {
80.         show: false
81.       },
82.       // 刻度标签
83.       axisLabel: {
84.         show: false
85.       },
86.       // 仪表盘轴线相关配置
87.       axisLine: {
88.         show: false
89.       },
90.       // 仪表盘指针
91.       pointer: {
92.         show: false
93.       },
94.       // 仪表盘刻度的分割段数
95.       splitNumber: 50,
96.       // 分隔线样式
97.       splitLine: {
98.         show: true,
99.         length: 40,
100.         distance: -15,
101.         lineStyle: {
102.           width: 10,
103.           // 背景是透明色的话 可能不太适用
104.           color: '#fff'
105.         }
106.       },
107.       detail: {
108.         show: false
109.       },
110.       data: [
111.         {
112.           value: 100
113.         }
114.       ]
115.     }
116.   ]
117. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告