echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线

本文介绍: 配置项，可以看出，series 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 label 标签，一个在内部展示，一个在外部展示，就可以完美解决这种情况。其中，formatter 是标签内容的格式器，用于转换格式。series 中（即其中的一个对象中），只能设置一个 label。属性是用来配置外部指示线（第一段、第二段）的长度及样式的。不过也好解决，通过查看 echarts 官网。查了下 Echarts 官网文档，需要配置。

需求

项目开发中，产品经理绘制的原型图中，需要前端实现一个饼状图，且既在饼图内部中显示百分比，又显示外部指示线及数值，效果如下图所示：

在这里插入图片描述

查了下 Echarts 官网文档，需要配置 s er ie s 下的 label 配置项，如下所示：

series: [
	label: {
		normal: {
			position: 'inside' // 在内部显示，outseide 是在外部显示
			show: true,
			formatter: '{c}  // formatter 是标签内容的格式器，用于转换格式。支持 字符串和回调函数两种形式。
		}
	}
	
]

其中，formatter 是标签内容的格式器，用于转换格式。支持字符串和回调函数两种形式。

{c} 代办字符串模板变量，表示数据值，常用的模板变量有：

{ a }：系列名
{ b }：数据名
{ c }：数据值
{ d }：百分比

不过问题来了，echarts 好像没法直接配置成内部+外部同时展示的情况。，因为在单个的 ser i es 中（即其中的一个对象中），只能设置一个 label。

在这里插入图片描述

不过也好解决，通过查看 echarts 官网 ser i es 配置项，可以看出，ser i es 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 lab el 标签，一个在内部展示，一个在外部展示，就可以完美解决这种情况。

代码实例如下所示：

series: [
                {
                    type: 'pie',
                    radius: '90%',
                    data: [
                        { value: data?.winBidNumber || 0, name: '中标数量' },
                        { value: data?.loseBidNumber || 0, name: '未中标数量' },
                        { value: data?.abandonBidNumber || 0, name: '弃标数量' }
                    ],
                    labelLine: {
                        show: true,
                        position: 'outside',
                        length: 10,
                        length2: 50
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            position: 'outside',
                            show: true,
                            formatter: (d: any) =&gt; {
                                console.log(222, d);
                                return d.name + '（' +  d.value  + '次' +'）'
                            }
                        }
                    }
                },
                {
                    type: 'pie',
                    radius: '90%',
                    data: [
                        { value: data?.winBidNumber || 0, name: '中标数量' },
                        { value: data?.loseBidNumber || 0, name: '未中标数量' },
                        { value: data?.abandonBidNumber || 0, name: '弃标数量' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            show: true,
                            formatter: (d: any) =&gt; {
                                return d.percent + '%'
                            }
                        }
                    }
                }
            ]