ECharts 饼图数据放在饼图内部显示

GoodTime

发布于 2024-03-05 15:49:31

1280

发布于 2024-03-05 15:49:31

文章被收录于专栏：GoodTime的全栈开发GoodTime的全栈开发

1、业务需求

将数据显示在饼图内部，格式化百分比显示，鼠标放上去显示具体名称和数值

原样式如下

2、业务实现

调整代码如下，核心语句已标记注释

option = {
	title: {
		text: 'Referer of a Website',
		subtext: 'Fake Data',
		left: 'center'
	},
	tooltip: {
		trigger: 'item'
	},
	legend: {
		orient: 'vertical',
		left: 'left'
	},
	series: [{
		name: 'Access From',
		type: 'pie',
		radius: '50%',
		data: [{
			value: 1048,
			name: 'Search Engine'
		},
		{
			value: 735,
			name: 'Direct'
		},
		{
			value: 580,
			name: 'Email'
		},
		{
			value: 484,
			name: 'Union Ads'
		},
		{
			value: 300,
			name: 'Video Ads'
		}],
		radius: '50%',
		center: ['50%', '50%'], // 这个属性可以调整图像的位置，左面所示为中心
		label: {
			normal: {
				show: true,
				position: 'inner', // 数值显示在内部
				formatter: '{d}%', // 格式化数值百分比输出
			},
		},
		emphasis: {
			itemStyle: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		}
	}]
};

更改后效果如下图所示