echarts饼图pie中间显示总数

echarts饼图pie中间显示总数

有这样一种需求，饼图中间显示总数，当鼠标悬浮指定区域时显示对应区域数值
网上搜了好多都是通过zlevel来实现的这种效果，但是如果echarts的背景如果不是纯色的，而是渐变色或者图片时，zlevel的方式就不好用了

实现效果

默认情况

鼠标悬浮到其中一个区域

实现代码

const myChart = echarts.init(document.getElementById('fwflEchart'))
// 重点代码
//隐藏title
const hideTitle = (e) => {
	myChart.value.setOption({
		title: {
			text: '',
		},
	})
}
//显示title
const showTitle = (e) => {
	myChart.value.setOption({
		title: {
			text: '房屋总数量\n2230',
		},
	})
}

// 给饼图添加事件
// 当区域高亮时隐藏title，比如当鼠标移动到legend上时
myChart.value.on('highlight', hideTitle)
// 当鼠标悬浮到区域时隐藏title
myChart.value.on('mouseover', hideTitle)
// 当鼠标离开区域时显示title
myChart.value.on('mouseout', showTitle)
// 当区域取消高亮时显示title，比如当鼠标从legend上离开时
myChart.value.on('downplay', showTitle)
// 设置option
myChart.setOption({
	color: ['#00d1d1', '#529fcf', '#71d0aa', '#c5ff7d',],
	title: {
		text: '总数量\n2230',
		top: '160px',
		left: '214px',
		textAlign: 'center',
		textStyle: {
			color: 'white',
			fontSize: '24px',
			lineHeight: 30
		}
	},
	legend: {
		bottom: '60px',
		textStyle: {
			color: 'white',
			fontSize: '16px'
		}
	},
	series: [
		{
			name: '房屋分类统计',
			type: 'pie',
			radius: [80, 160],
			avoidLabelOverlap: false,
			center: ['50%', '40%'],
			label: {
				show: false,
				position: 'center'
			},
			// 鼠标悬浮时中心位置显示对应区域的信息
			emphasis: {
				label: {
					formatter: `{b}\n{c}`,
					show: true,
					fontSize: '24px',
					fontWeight: 'bold',
					color: () => {
					},
					lineHeight: 30
				}
			},
			itemStyle: {
				borderRadius: 10,
				borderColor: 'rgba(255,255,255,0)',
				borderWidth: 2
			},
			labelLine: {
				show: false
			},
			data: [
				{value: 1427, name: 'AAA'},
				{value: 515, name: 'BBB'},
				{value: 113, name: 'CCC'},
				{value: 173, name: 'DDD'},
			]
		}
	]
});