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

青旅半醒 2024-03-26 12:33 56阅读 0赞

## 需求 ##

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

![在这里插入图片描述][acf1ee5639c44249adc8d12b73e5be68.png]

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

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

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

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

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

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

![在这里插入图片描述][926b961d8f72424888646a026f986d98.png]

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

代码实例如下所示：

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) => {
        
                                    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) => {
        
                                    return d.percent + '%'
                                }
                            }
                        }
                    }
                ]

其中，  labelLine  属性 是 用来配置 外部指示线（第一段、第二段）的长度及样式的。

**formatter** 为 回调函数的写法如上面的代码实例，该回调函数接收一个参数，该参数的值包含了 模板字符串变量所拥有的值，如下图打印的所示：

![在这里插入图片描述][a61b4dd3895a4e7db8c8e523eb90e36f.png]

[acf1ee5639c44249adc8d12b73e5be68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2c7bc52a4158493b9a3ca0235137eb56.png
[926b961d8f72424888646a026f986d98.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/94300ff07b8e43a99ae498f6a7c8ef90.png
[a61b4dd3895a4e7db8c8e523eb90e36f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8c968d0157af4f93b0833eae6fca1752.png