解決某些情況下 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 = https://www.cnblogs.com/m1pha/archive/2022/08/10/res.data
結論：其實效果也不太好，而且長度都寫死了，也可能會出現其它的問題，不過也算是勉勉強強完成需求了，如果哪個大佬有更好的解決方法，那就求求了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501536.html
標籤：其他