Echarts之环形图 && 自定义title居中

先上效果图 蓝色发光的环形圈 是背景图片

重要代码：【富文本设定title样式】

title: {
	zlevel: 0,
	text: [`{value|${data.value}}`, `{name|${data.type}}`].join("\n"),
	top: "center",
	left: "46%",
	textAlign: "center",
	textStyle: {
		rich: {
			value: {
				color: "#87f8c7",
				fontSize: 18,
				fontWeight: "350",
				lineHeight: 24,
			},
			name: {
				color: "#C8DBF4",
				fontSize: 10,
			},
		},
	},
},

因为我这里是多个环形图 所以 使用了动态绑定html

<template>
	<div class="pie-top-hitters-container" id="pie-top-hitters-container">
		<div v-html="htmldiv" style="height: 100%">div>
		
		
	div>
template>

watch: {
	data: {
		handler(newVal) {
		/*
		newVal = [
					{
						value: 20,
						type: "SMT1",
						data: [
							{ name: 1, value: 20 },
							{ name: 2, value: 60 },
							{ name: 3, value: 20 },
							{ name: 4, value: 80 },
						],
					}
				],
        */
		this.htmldiv = "";
		this.data.forEach((item, dataIndex) => {
			this.htmldiv += "
+ "piesmttophitters" + dataIndex + " class=chart>
";
			this.$nextTick(() => {
				this.pieChart("piesmttophitters" + dataIndex, item);
			});
		});
		},
		deep: true,
		immediate: true,
	},
},

完整环形图代码

pieChart(id, data) {
	let count = echarts.init(document.getElementById(id));
	let option = {
		color: ["#fac858", "#93beff", "#507afc", "#87f8c7", "#FCD682", "#8FB7F5", "#6287FA", "#9DFDD3"],
		title: {
			zlevel: 0,
			text: [`{value|${data.value}}`, `{name|${data.type}}`].join("\n"),
			top: "center",
			left: "46%",
			textAlign: "center",
			textStyle: {
				rich: {
					value: {
						color: "#87f8c7",
						fontSize: 18,
						fontWeight: "350",
						lineHeight: 24,
					},
					name: {
						color: "#C8DBF4",
						fontSize: 10,
					},
				},
			},
		},
		tooltip: {
			trigger: "item",
		},
		grid: {
			top: 0,
			left: 0,
			bottom: "2%",
			containLabel: true,
		},
		series: [
			{
				name: "",
				type: "pie",
				radius: ["50%", "70%"],
				animationDuration: 2000,
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: "center",
				},
				emphasis: {
					label: {
						show: false,
					},
				},
				labelLine: {
					show: false,
				},
				data: data.data,
			},
		],
	};
	count.setOption(option);
	window.addEventListener("resize", () => {
		if (count) {
			count.resize(); // 不报错
		}
	});
},