The uniapp project encapsulates a pie chart component and modifies the arrangement of display items

 The requirements are as follows:

The finished effect after real data rendering is as follows:

 Record the code:

<template>
	<view>
		<view style="height:  600rpx;">
			<l-echart ref="chart" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	export default {
		props: {
			piechartData: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				option: {

					legend: [{
							orient: 'vertical',
							height: 100,
							bottom: 1,
							left: '0%',
							data: [],
						},
						{
							orient: 'vertical',
							height: 100,
							bottom: 1,
							right: '0%',
							data: [],
							// textStyle: {
							//     rich: {
							//       name: {
							//         width: 100,
							//         height: 20,
							//         align: 'center',
							//         display: 'flex',
							//         justifyContent: 'space-between'
							//       }
							//     }
							//   }
						}
					],
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {d}%'
					},
					series: [{
						name: '',
						type: 'pie',
						radius: '50%',
						center: ['center', '40%'],
						data: [],
						emphasis: {
							itemStyle: {
								width: 30,
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						labelLine: {
							show: false // 隐藏饼图伸出来的线条
						},
						label: {
							normal: {
								// formatter: '{d}%',
								// position: 'inside'
                                 formatter: function(params) {
                                      // params.value：数据值
                                      // params.percent：百分比
                                      return  Math.round(params.value * 100)+'%';
                                    },
                                    position: 'inside'
							},
							show: false // 隐藏饼图上的文字
						},

					}]
				}

			}
		},
		mounted() {},
		watch: {
			piechartData: {
				handler(newValue, oldValue) {
					this.init()
				},
				deep: true,
			},
		},
		methods: {
			async init() {
				// console.log(this.chartData,'111');
				const chart = await this.$refs.chart.init(echarts);
				// chart.setOption(this.option)
				this.option.series[0].data = this.piechartData.map((v) => {
					return {
						value: v.percentage,
						name: v.medalName
					}
				})

				// legend
				let list = this.piechartData.map((v) => v.medalName);
				this.option.legend[0].data = list.slice(0, 4);
				this.option.legend[0].formatter = legendFormatter.bind(this.option);
				this.option.legend[1].data = list.slice(4);
				this.option.legend[1].formatter = legendFormatter.bind(this.option);

				chart.setOption(this.option);
				
				   

				// this -> option
				function legendFormatter(name) {
					const data = this.series[0]['data'];
					let currentDataVal = data.filter(e => e.name === name)[0].value;

					// currentDataVal = !currentDataVal ? `0%` : `${(currentDataVal * 100).toFixed(2)}%`;
					currentDataVal = !currentDataVal ? `0%` : `${Math.round(currentDataVal * 100)}%`;
                    const str = "  ";
					return `${name}${str}${currentDataVal}`;
				}
			},
		}
	}
</script>

<style lang="scss">
	.echarts-legend-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.echarts-legend-item {
		display: inline-block;
	}

	.legend-item {
		flex-basis: 49%;
	}
</style>

In ECharts, the label   formatterattribute in the series is used to format the displayed content of the label. It can accept a callback function as an argument to customize how the label is displayed.

The parameter of the callback function is an object, which contains the relevant information of the label, such as data value, percentage (data value or percentage displayed on the pie chart), etc. You can use the attributes to customize the displayed content of the label according to your needs.

Here's an example showing how to use a callback function to customize what a label displays:

label: {
  normal: {
    formatter: function(params) {
      // params.value：数据值
      // params.percent：百分比
      return params.value + ' (' + params.percent + '%)';
    },
    position: 'inside'
  },
  show: true // 显示饼图上的文字
}

In this example, we concatenate the data value and percentage as the display content of the label. You can write the callback function according to your own needs and return the corresponding string.