echarts 多圆环图表

option如下

vue代码

const d = [
	{value: 348, name: '内部人员'},
	{value: 735, name: '外部人员'}
]
const colors = ['#cfc100', '#1091ca']
const colors2 = ['#fff000', '#11b6ff']
const el = this.$refs.bgry_chart as HTMLElement
const width = el.offsetWidth
const myEchart = echarts.init(el)
myEchart.setOption({
	color: colors,
	title: {
		text: '1083\n总数',
		textAlign: 'center',
		textStyle: {
			color: 'white'
		},
		top: 104,
		left: 154
	},
	tooltip: {
		trigger: 'item'
	},
	legend: {
		bottom: '15%',
		left: 'center',
		icon: "rect",
		orient: 'vertical',
		itemWidth: 14,
		itemHeight: 14,
		formatter: function (name, p)  {
			let sum = 0
			const c = d.find(item => item.name === name)
			d.forEach(i => {
				sum += i.value
			})
			return name + '   ' + c.value + '个   ' + ((c.value/sum)*100).toFixed(0) + '%'
		},
		textStyle: {
			color: 'white'
		}
	},
	series: [
		{
			name: '办公人员',
			type: 'pie',
			radius: ['34%', '46%'],
			top: -100,
			avoidLabelOverlap: false,
			itemStyle: {
				borderColor: 'rgba(255,255,255,0)',
				borderWidth: 2,
				color: (params: any) => {
					return {
						type: 'radial',
						x: 159,
						y: 125,
						r: 106,
						colorStops: [{
							offset: .64, color: colors[params.dataIndex] // 0% 处的颜色
						}, {
							offset: .69, color: colors2[params.dataIndex] // 100% 处的颜色
						}, {
							offset: 1, color: colors2[params.dataIndex] // 100% 处的颜色
						}],
						global: true // 缺省为 false
					}
				}
			},
			label: {
				show: false,
			},
			labelLine: {
				show: false
			},
			data: d
		},{
			name: '办公人员',
			type: 'pie',
			radius: ['54%', '56%'],
			top: -100,
			avoidLabelOverlap: false,
			itemStyle: {
				color: '#1091ca',
			},
			label: {
				alignTo: 'edge',
				color: '#ffffff',
				formatter: '{value|{c}}\n{name|{b}}',
				minMargin: 15,
				edgeDistance: 10,
				lineHeight: 20,
				rich: {
					time: {
						fontSize: 10
					}
				}
			},
			labelLine: {
				length: 15,
				maxSurfaceAngle: 80
			},
			labelLayout: function (params: any) {
				var isLeft = params.labelRect.x < width / 2;
				var points = params.labelLinePoints;
				// Update the end point.
				points[2][0] = isLeft
						? params.labelRect.x
						: params.labelRect.x + params.labelRect.width;

				return {
					labelLinePoints: points
				};
			},
			data: d,
			silent: true,
		}, {
			name: '办公人员',
			type: 'pie',
			radius: ['26%', '28%'],
			top: -100,
			avoidLabelOverlap: false,
			itemStyle: {
				color: '#1091ca',
			},
			label: {
				show: false,
			},
			labelLine: {
				show: false
			},
			data: d,
			silent: true,
		}
	]
})