uniapp项目 封装一个饼图组件 并且修改显示项的排列方式

 需求如下:

真实数据渲染后的完成效果如下:

 记录一下代码:

<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>

在ECharts中，series 里面的label  formatter属性用于格式化标签的显示内容。它可以接受一个回调函数作为参数，以便自定义标签的显示方式。

回调函数的参数是一个对象，包含了标签的相关信息，如数据值、百分比(在饼图上显示的数据值或百分比)等。你可以根据需要使用其中的属性来自定义标签的显示内容。

下面是一个示例，展示如何使用回调函数来自定义标签的显示内容：

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

在这个示例中，我们将数据值和百分比拼接在一起作为标签的显示内容。你可以根据自己的需求来编写回调函数并返回相应的字符串。