效果：

程式碼：

• 如果想要富文字生效，echarts版本需要4.0以上

<template>
	<div>
		<div class="chart" ref="preChart"></div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
	data() {
		return {}
	},
	mounted() {
		this.getPieChart()
	},
	methods: {
		getPieChart() {
			let chartData = [
				{ name: '華北地區', value: 754 },
				{ name: '東北地區', value: 611 },
				{ name: '華東地區', value: 400 },
				{ name: '中部地區', value: 300 },
				{ name: '西部地區', value: 200 },
			]
			let total = chartData.reduce((a, b) => {
				return a + b.value
			}, 0)
			let color = [
				[
					'rgb(19, 204, 204)',
					'rgb(248,150,55)',
					'rgb(247, 85, 39)',
					'rgb(31, 137, 241)',
					'rgb(40, 245, 154)',
				],
				[
					'rgba(19, 204, 204, 0)',
					'rgba(248, 150, 55, 0)',
					'rgba(247, 85, 39, 0)',
					'rgba(31, 137, 241, 0)',
					'rgba(40, 245, 154, 0)',
				],
			]

			let optionData = getData(chartData)
			function getData(data) {
				var res = {
					series: [],
					yAxis: [],
				}
				for (let i = 0; i < chartData.length; i++) {
					res.series.push({
						name: '',
						type: 'pie',
						clockWise: true, // 順時針載入
						hoverAnimation: false, // 滑鼠移入變大
						radius: [75 - i * 15 + '%', 68 - i * 15 + '%'],
						center: ['50%', '50%'], // 圖示位置
						label: {
							show: true,
							formatter: '{d}%',
							color: '#000000',
							fontSize: 12,
							position: 'inside',
						},
						data: [
							{
								value: chartData[i].value,
								name: chartData[i].name,
							},
							{
								value: 1000 - chartData[i].value,
								name: chartData[i].name,
								itemStyle: {
									color: 'rgba(0,0,0,0)',
									borderWidth: 0,
								},
								tooltip: {
									show: false,
								},
								label: {
									show: false,
								},
								hoverAnimation: false,
							},
						],
					})
					res.yAxis.push(chartData[i].name)
				}
				return res
			}

			let option = {
				color: color[0],
				legend: [
					{
						orient: 'vertical',  // 圖例列表的佈局朝向
						icon: 'none', // 標記型別包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，支援自定義
						left: '8%',
						top: '25%',
						align: 'center',
						itemGap: 20, // 圖例之間的間隔，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
						formatter: function(name) {
							let res = chartData.filter((v) => v.name === name)
							let percent = ((res[0].value * 100) / total).toFixed(0)
							return '{a|' + percent + '%}' + '\n' + '{b|' + name + '}'
						},
						textStyle: {
							rich: {
								a: {
									fontSize: 18,
									fontWeight: 500,
									lineHeight: 30,
									color: color[0],
								},
								b: {
									fontSize: 12,
									fontWeight: 500,
									color: '#666666',
								},
							},
						},
						data: chartData.slice(0, 3),
					},
					{
						orient: 'vertical',
						icon: 'none',
						left: '20%',
						top: '25%',
						align: 'center',
						itemGap: 20,
						formatter: function(name) {
							let res = chartData.filter((v) => v.name === name)
							let percent = ((res[0].value * 100) / total).toFixed(0)
							return '{a|' + percent + '%}' + '\n' + '{b|' + name + '}'
						},
						textStyle: {
							align: 'center',
							rich: {
								a: {
									fontSize: 18,
									fontWeight: 500,
									lineHeight: 30,
									color: color[0],
								},
								b: {
									fontSize: 12,
									fontWeight: 500,
									color: '#666666',
								},
							},
						},
						data: chartData.slice(3, 5),
					},
				],
				grid: { // name顯示的位置
					top: '10%',
					bottom: '52%',
					left: '50%',
					containLabel: false,
				},
				yAxis: [
					{
						type: 'category',
						inverse: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							inside: false,
							textStyle: {
								color: '#666666',
								fontSize: 12,
							},
						},
						data: optionData.yAxis,
					},
				],
				xAxis: [
					{
						show: false,
					},
				],
				series: optionData.series,
			}
			let preChart = echarts.init(this.$refs.preChart)
			preChart.setOption(option)
		},
	},
}
</script>

<style lang="scss" scoped>
.chart {
	width: 100%;
	height: 500px;
}
</style>