echarts自定义图例显示名称、数值、占比

先上代码

		legend: {
			orient: 'vertical',
			left: 10,
			top:20,
			data: data,
			textStyle: {
				color: '#9FB7D5' // 设置图例文字颜色为白色
			},
			// type: 'plain', // 设置图例类型为普通类型
			itemWidth: 10, // 设置图例项的宽度
			itemHeight: 10, // 设置图例项的高度
			formatter: function(name) {
				let item = data.find(item => item.name === name);
				let percentage = ''; // 初始化百分比为空字符串
				if (percent) {
					let sum = data.reduce((acc, cur) => acc + parseInt(cur.value), 0);
					percentage = ` (${(data.find(data => data.name === name).value / sum * 100).toFixed(2)}%)`; // 在百分比前后添加括号
				}

				return `${name} ${item.value}${percentage}`; // 返回格式化后的字符串
			}
		},

重点在于.reduce方法的运用，计算出总数。再用当前值除以总数得到百分比。

let sum = data.reduce((acc, cur) => acc + parseInt(cur.value), 0);
percentage = ` (${(data.find(data => data.name === name).value / sum * 100).toFixed(2)}%)`; // 在百分比前后添加括号

其他修改图例大小的很简单

最后模板化输出。