使用echarts餅狀圖label既在內(nèi)部顯示數(shù)值(百分比),又顯示外部指示線

更新時(shí)間：2024年03月13日 15:47:30 作者：小劉加油！

這篇文章主要介紹了使用echarts餅狀圖label既在內(nèi)部顯示數(shù)值(百分比),又顯示外部指示線問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

需求

項(xiàng)目開發(fā)中，產(chǎn)品經(jīng)理繪制的原型圖中，需要前端實(shí)現(xiàn)一個(gè)餅狀圖，且既在餅圖內(nèi)部中顯示百分比，又顯示外部指示線及數(shù)值

效果如下圖所示：

查了下Echarts官網(wǎng)文檔

需要配置 series 下的 label 配置項(xiàng)

如下所示：

series: [
	label: {
		normal: {
			position: 'inside' // 在內(nèi)部顯示，outseide 是在外部顯示
			show: true,
			formatter: '{c}  // formatter 是標(biāo)簽內(nèi)容的格式器，用于轉(zhuǎn)換格式。支持 字符串和回調(diào)函數(shù)兩種形式。
		}
	}
	
]

其中，formatter 是標(biāo)簽內(nèi)容的格式器，用于轉(zhuǎn)換格式。

支持字符串和回調(diào)函數(shù)兩種形式。

{c} 代辦字符串模板變量，表示數(shù)據(jù)值，常用的模板變量有：

{ a }：系列名
{ b }：數(shù)據(jù)名
{ c }：數(shù)據(jù)值
{ d }：百分比

問題來了

echarts 好像沒法直接配置成內(nèi)部+外部同時(shí)展示的情況。

因?yàn)樵?strong>單個(gè)的 series 中（即其中的一個(gè)對(duì)象中），只能設(shè)置一個(gè)label。

不過也好解決

通過查看 echarts 官網(wǎng) series 配置項(xiàng)，可以看出，series 是一個(gè)數(shù)組（如上圖所示），既然單個(gè)中只能出現(xiàn)一個(gè)，那么我配置成 2個(gè)（多個(gè)）相同的對(duì)象，讓他們重合，就會(huì)出現(xiàn)兩個(gè) label 標(biāo)簽，一個(gè)在內(nèi)部展示，一個(gè)在外部展示，就可以完美解決這種情況。

代碼實(shí)例如下所示：

series: [
                {
                    type: 'pie',
                    radius: '90%',
                    data: [
                        { value: data?.winBidNumber || 0, name: '中標(biāo)數(shù)量' },
                        { value: data?.loseBidNumber || 0, name: '未中標(biāo)數(shù)量' },
                        { value: data?.abandonBidNumber || 0, name: '棄標(biāo)數(shù)量' }
                    ],
                    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: '中標(biāo)數(shù)量' },
                        { value: data?.loseBidNumber || 0, name: '未中標(biāo)數(shù)量' },
                        { value: data?.abandonBidNumber || 0, name: '棄標(biāo)數(shù)量' }
                    ],
                    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 屬性是用來配置外部指示線（第一段、第二段）的長(zhǎng)度及樣式的。

formatter 為回調(diào)函數(shù)的寫法如上面的代碼實(shí)例，該回調(diào)函數(shù)接收一個(gè)參數(shù)，該參數(shù)的值包含了模板字符串變量所擁有的值

如下圖打印的所示：