echarts 圆形进度条圆角

更新一下
刚被csdn小伙伴告知，echarts即将发布5.0版本，新增圆角功能了，再也不用为了圆角掉头发了啊哈哈哈哈哈哈哈哈哈哈哈哈

最近写项目的时候UI设计了一个图(下图所示),有个地方难到我了，就是蓝色进度条圆角那里，我翻遍了百度，都没找到echarts设置圆角的属性，有找到type="bar"的解决方法，但是我的是type="pie"，然后翻了翻echarts社区里的各种各种，最后发现了如果想要圆角就得换一种思路

我是在echarts社区里找了个类似的，然后在里面对着设计图各种改，其实我是把进度条换成空心的，然后给border使劲加宽度，加到一定的宽度就会重合到一起，看起来就像是个圆角一样

下面就是具体的代码

var uploadedDataURL = "../../img/point.png";
		let Green = {
			x: 0,
			y: 0,
			x2: 0,
			y2: 1,
			colorStops: [{
				offset: 0,
				color: 'rgba(217,228,232,0.5)' // 0% 处的颜色
			}],
			globalCoord: false
		};
		var dataValArray = 0.72;
		var datatext = ['72'];
		var datasubtext = ['2019年9月'];
		option = {
			backgroundColor: '#fff',
			title: {//圆形中间的文字
				text: "72%",
				left: "center",
				top: "38%",
				textStyle: {
					color: "#DC722F",
					fontSize: 24,
					align: "center",
					fontWeight:400
				}
			},
			graphic: { //图形中间文字
				type: "text",
				left: "center",
				top: "65%",
				style: {
					text: "2019年9月",
					textAlign: "center",
					fill: "#CFCFCF",
					fontSize: 10
				}
			},
			series: [{
					//渐变圆环  这是后面的灰色背景圆环
					name: "圆环",
					type: "pie",
					radius: [46, 68],//控制圆环大小的
					startAngle: 180,
					hoverAnimation: false,
					avoidLabelOverlap: true,
					z: 0,
					zlevel: 0,
					label: {
						show: false,
						normal: {
							show: false
						}
					},

					data: [{
						value: 0,
						name: "",
						itemStyle: {
							normal: {
								color: Green
							}
						}
					}]
				},
				{
				//这是个仪表盘的样式，我把它隐藏了
					name: "",
					type: "gauge",
					radius: "90%",
					startAngle: 180,
					clockwise: true,
					splitNumber: 50,
					hoverAnimation: true,
					axisTick: {
						show: false
					},
					splitLine: {
						length: 0,
						lineStyle: {
							width: 1,
							color: "#fff"
						}
					},
					axisLabel: {
						show: false
					},
					pointer: {
						show: false
					},
					axisLine: {
						lineStyle: {
							opacity: 0
						}
					},
					detail: {
						show: false
					},
					data: [{
						value: Math.round((dataValArray * 100)),
						name: ""
					}]
				},
				{
					//进度圆环  这是中间的蓝色圆环
					name: 'Line 1',
					type: 'pie',
					startAngle: 260,
					clockWise: true,
					radius: ['80%','85%'],//控制圆环大小的
					itemStyle: {
						normal: {
							label: {
								show: true
							},
							labelLine: {
								show: false
							},

						}
					},
					hoverAnimation: false,
					data: [{
						value: 75,
						name: 'invisible',
						itemStyle: {
							normal: {
								color: '#fff',
								borderWidth: 1,
								borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#459EF9'
								}, {
									offset: 1,
									color: '#39FAD8'
								}]),
								borderWidth: 5//就是在这里加宽度
							}
						}
					}, { //进度条起始地方有个圆环，是放了个图片上去的，这是调整图片的
						name: "",
						value: 0,
						label: {
							position: 'inside',
							backgroundColor: {
								image: uploadedDataURL
							},
							width: 16,
							height: 16,
							borderRadius: 20,
							padding: 14
						}
					}, {
						value: 100 - Math.round((dataValArray * 100)),
						name: 'invisible',
						itemStyle: {
							normal: {
								color: 'transparent', //未完成的圆环的颜色，我设置成了透明
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						}
					}]
				}
			]
		};

看到此文章的希望能帮到你，我写项目的时候也是愁的不行，终于摸索出来了，就想着分享一下，让其他朋友能少走弯路，具体有什么不懂的可以来问一下，我也是小白，不过可以尽努力帮忙的，在此，感谢浏览~