解決某些情況下 ECharts 餅圖多行標簽重疊問題

解決某些情況下 ECharts 餅圖多行標簽重疊問題

對於多行標簽的重疊問題，其實一直沒有一個完美的解決方案。

我能在網上查到的比較全面的解決方法就是這個：https://zhuanlan.zhihu.com/p/272710806

但我的項目中某些東西是明確的：Label的行數、字體大小、數據個數(只有6個)、而且不必要做適配。

所以我就用曲線救國的方式避免了多行標簽的重疊。

PS：我覺得5.0.0版本以上的labelLayout是一個更好的曲線救國方式，不過我這裡是4.8.0的。

我的問題：有許多小百分比的數據，導致label重疊：

第一步：調整數組順序

ECharts餅圖的label方向似乎是固定的，所以先調整一下數組元素的順序，讓label可以不僅僅放在左邊（我的需求是從小到大的順序，這裡暫時改回了單行label）。
效果：

第二步：調整數據中的labelLine.length

標簽重疊是因為離得近，那我讓它們離遠點就好了。

代碼：

//Chart配置文件
option: {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        //一些代碼
                        //等會這裡就需要修改了
                        data: [
                        ],
                        //一些代碼
                        //這裡就是標簽，我想讓它以某種樣式顯示兩行
                        label: {
                            formatter: [
                                '{c|{c}}',
                                '{b|{b}}',
                            ].join('\n'),
                            rich: {
                                c: {
                                    color: "#00EDFF",
                                    fontSize: 17,
                                    fontFamily: 'PingFangSC-Semibold, PingFang SC',
                                    height:18,
                                    fontWeight: 600,
                                    align:"right",
                                },
                                b: {
                                    color: "#FFFFFF",
                                    height:18,
                                    fontSize: 14,
                                    fontWeight: 500,
                                },
                            },
                            //這裡可以先設置全局的長度
                            labelLine:{
                                length:10,
                            }
                        },
                    }
                ]
            },

//處理下數據
//調數組順序
let temp = arr.pop()
arr.unshift(temp)
temp = arr.pop()
arr.unshift(temp)
//改變標簽線的長度
arr[0].labelLine = {}
arr[4].labelLine = {}
arr[5].labelLine = {}
arr[0].labelLine.length = 50,
arr[4].labelLine.length = 30,
arr[5].labelLine.length = 50,
this.option.series[0].data = res.data

結論：其實效果也不太好，而且長度都寫死了，也可能會出現其它的問題。不過也算是勉勉強強完成需求了。如果哪個大佬有更好的解決方法，那就求求了！