echarts饼图外圈颜色减半，legend每个颜色显示不一样 vue3

效果图

处理的函数(我取名为computedDataGap),下方我处理数据

// echarts的饼图模块  分块和外圈颜色变淡
export const computedDataGap = (dataParam, isN2 = false) => {
	let newData = [];
	let gapItem = {
		value: 1, //间隙值
		name: null,
		itemStyle: {
			opacity: 0
		},
		tooltip: {
			//隐藏这个的鼠标悬浮
			show: false
		}
	};
	let showLen = dataParam.filter(v => v.value && v.value > 0);
	if (showLen.length <= 1) {
		return dataParam;
	}
	dataParam.map(v => {
		let v_ = v;
		// 用于判断是否是 外城pie的item
		if (isN2) {
			v_ = {
				...v,
				itemStyle: {
					color: v.itemStyle.color + "7a"
				},
				label: {
					show: false
				}
			};
		} else {
			v_ = {
				...v,

				label: {
					normal: {
						show: true,
						color: "#fff"
						// formatter: ‘{ b } { c } ’,
						// padding: [0, -50, 60, -50],
						// padding: [0, -55]
					}
				},
				labelLine: {
					show: true,
					length: 20,
					length2: 10
				},
				labelLayout: {
					verticalAlign: "bottom",
					dy: 1600
				}
			};
		}
		newData.push(v_);
		if (v.value) {
			newData.push(gapItem);
		}
	});
	return newData;
};

代码
我是父传子 val是我传递的数据，all是我使用在title中，显示的总数

const init = (val, all) => {
	let colors = ["#ffa858", "#3ee9d5", "#84aef6", "#e16c5f", "#FC4F00"];
	let legends = [];
	val.map((item, k) => {
		legends.push(item.name);
		item["itemStyle"] = { color: colors[k] };
	});
	// 内圈数据
	let n = computedDataGap(val);
	// 外圈数据
	let n2 = computedDataGap(val, true);
	let chartDom = distributionPerRef.value;
	let myChart = echarts.init(chartDom);
	let option;
	option = {
		tooltip: {
			trigger: "item"
		},
		title: {
			subtext: "总计",
			text: all.toFixed(0),
			textStyle: {
				fontFamily: "D-DIN-Bold",
				color: "#fff",
				fontSize: 20,
				padding: [0, 0, 25, 0]
			},
			subtextStyle: {
				fontSize: 12,
				fontWeight: "bolder",
				color: "#fff",
				left: "center"
			},
			x: "34%",
			y: "43%",
			textAlign: "center"
		},
		legend: {
			icon: "rect",
			// itemWidth: 16,
			// itemHeight: 8,
			// itemStyle: {
			// 	borderWidth: 3
			// },
			orient: "vertical",
			data: legends,
			right: "5%",
			top: "center",
			align: "left",
			textStyle: {
				color: "#fff",
				fontSize: 12,
				padding: [0, 0, 0, 10],
				rich: {
					num0: { color: colors[0], fontFamily: "D-DIN-Bold", fontSize: 16 },
					num1: { color: colors[1], fontFamily: "D-DIN-Bold", fontSize: 16 },
					num2: { color: colors[2], fontFamily: "D-DIN-Bold", fontSize: 16 },
					num3: { color: colors[3], fontFamily: "D-DIN-Bold", fontSize: 16 },
					num4: { color: colors[4], fontFamily: "D-DIN-Bold", fontSize: 16 },
					b: { color: "#fff" }
				}
			},
			formatter: name => {
				if (val.length) {
					let target;
					let index;
					for (let i = 0, l = val.length; i < l; i++) {
						if (val[i].name == name) {
							target = val[i].value;
							index = i < val.length ? i : val.length - 1;
						}
					}
					return `{b|${name}}  {num${index}|${target}%}`;
				}
			},
			itemGap: 10 // 图例之间的间隔
		},
		color: colors,
		series: [
			// 值
			{
				name: "田块地类分布",
				type: "pie",
				radius: ["55%", "70%"],
				center: ["35%", "50%"],
				// 避免label重叠
				// avoidLabelOverlap: false,
				// 占位样式
				// emptyCircleStyle: {
				//    color: 'rgba(255,255,255,0)'
				// },
				label: { show: false },
				data: n,
				tooltip: { show: true },
				emphasis: {
					disabled: true
				}
			},
			// 外边界
			{
				name: "田块地类分布",
				type: "pie",
				radius: ["70%", "85%"],
				center: ["35%", "50%"],
				// 避免label重叠
				avoidLabelOverlap: false,
				// 占位样式
				emptyCircleStyle: {
					color: "rgba(255,255,255,0)"
				},
				labelLine: {
					show: false
				},
				label: {
					//这里加上用于剩余最后一个占满时的旋转； 在data的label没有时则用这个；且data内的优先级高于此
					show: false,
					position: "outside",
					color: "#fff",
					rotate: 0
				},
				data: n2
			},
			// 最里面的圆
			{
				name: "pie4",
				type: "pie",
				zlevel: -1,
				radius: ["50%", "53%"],
				center: ["35%", "50%"],
				grid: {
					color: "#717f7e",
					label: {
						show: false
					},
					labelLine: {
						show: false
					},
					data: [1],
					silent: true
				}
			}
		]
	};
	option && myChart.setOption(option);
};