环形嵌套进度条（带百分比）

效果图如下：

主要思路：多个echarts饼图嵌套
其中，刻度的实现，想破了脑袋，想了这个方法，好在也是实现了，如果有更好的方法，欢迎分享交流。
下面直接上代码

var myChart = echarts.init(document.getElementById('main'));
let resData = [{
	name: 'CPP',
	value: 80
}, {
	name: 'Shared',
	value: 40
}, {
	name: 'Exclusive',
	value: 60
}]
let name = resData.map((item) => item.name) // 获取名称
let value = resData.map((item) => item.value) // 获取数值
let sum = value.reduce((pre, cur) => pre += cur, 0) // 总和
let color = [ // 渐变颜色
	['#2592FF', '#20a6ff'],
	['#F7C23A', '#ffc83c'],
	['#7686A3', '#8395b4'],
]
let series = []
let yAxis = []
for (let i = 0; i < resData.length; i++) {
	series.push({//数据的圆环
		type: 'pie',
		clockWise: true, //顺时加载
		hoverAnimation: false, // 鼠标移入变大
		radius: [60 - i * 12 + '%', 53 - i * 12 + '%'], // 圆环
		center: ['50%', '45%'],
		itemStyle: {
			normal: {
				label: {
					show: false
				},
				labelLine: {
					show: false
				},
				borderWidth: 18
			}
		},
		data: [{
			name: resData[i].name,
			value: resData[i].value,
			itemStyle: {
				normal: { // 渐变色
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: color[i][0]
					}, {
						offset: 1,
						color: color[i][1]
					}])
				}
			},
		}, { // 阴影段
			name: '',
			value: sum - resData[i].value,
			itemStyle: {
				normal: {
					color: 'transparent'
				}
			},
			hoverAnimation: false // 鼠标移入变大
		}]
	})
	series.push({
		name: '',
		type: 'pie',
		clockWise: true, //顺时加载
		z: 1, // 层级，默认为 2，z小的会被z大的覆盖住
		hoverAnimation: true, // 鼠标移入变大
		radius: [60 - i * 12 + '%', 53 - i * 12 + '%'], // 圆环
		center: ['50%', '45%'], // 位置
		label: {
			show: false
		},
		data: [{ // 阴影的75%
			value: 7.5,
			itemStyle: {
				normal: {
					color: '#F1F1F1'
				}
			},
			tooltip: {
				show: false
			},
		}, { // 阴影的最后25%，透明
			value: 2.5,
			itemStyle: {
				normal: {
					color: 'rgba(0,0,0,0)',
					borderWidth: 0
				}
			},
			tooltip: {
				show: false
			},
		}]
	})
}
//自定义刻度对象数组，以达到实现的目的
let percentLIst = [{//设置百分比
		value: 0,
		name: '0%'
	}];
for (let i = 1; i < 11; i++) {
	let item = {
		value: 1,
		name: i * 10 + '%'
	}
	percentLIst.push(item)
}
percentLIst.push({ // 阴影的最后25%，透明
	value: 3
})
series.push({
	name: '百分比',
	type: 'pie',
	clockWise: true, //顺时加载
	z: 5, // 层级，默认为 2，z小的会被z大的覆盖住
	hoverAnimation: true, // 鼠标移入变大
	radius: ['70%', '70%'], // 圆环  实现百分比刻度的重点
	center: ['50%', '45%'], // 位置
	itemStyle: {
		normal: {
			label: {
				show: true,//实现百分比刻度的重点
				color: '#3e3e3e',
				padding: [0, -15],
				position: 'inside',//实现百分比刻度的重点
				align: 'right',
			},
			labelLine: {
				show: false,
			},
		}
	},
	data: percentLIst
})
let option = {
	tooltip: {
		trigger: 'item',
		backgroundColor: 'rgba(255, 255, 255)',
		textStyle: {
			color: '#3e3e3e'
		},
		padding: [13, 12],
		extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);',
		formatter: function(param) { //自定义弹出框的内容
			var res = param.color.colorStops ?
				'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
				param.color.colorStops[0].color + '"></span>' + param.name + '<br/>' +
				param.value + '; ' + param.percent + ' %' : ""
				//上面自带的百分比是不对的，需要重新计算 再渲染
			return res;
		}
	},
	grid: {
		top: '13%',
		left: '48%',
		width: '40%',
		height: '20%',
		containlabel: false
	},
	xAxis: [{ // x轴隐藏
		show: false
	}],
	yAxis: [{ // y轴配置
		type: 'category',
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			show: true,
			interval: 0,
			textStyle: {
				color: '#7c7c7c',
				fontSize: 14
			}
		},
		data: name.reverse()
	}],
	series: series
}
myChart.setOption(option)