Echarts 餅圖(series)標題文字太長的換行設置


英文標題中,設置遇到空格換行 v.name.split(" ").join("\n")

itemStyle: {
    normal: {
        label: {
            show: true,
            formatter: function(v) { //讓series 中的文字進行換行
                //文字中遇到空格就換行
                let text = Math.round(v.percent)+'%' + "\n" + '{hr|}' + '' + v.name.split(" ").join("\n");
                return text;
            }
        },
        labelLine: {
            show: true
        }
    }
}

中文標題,根據文字長度判斷換行

formatter(v) {
    let text = Math.round(v.percent) + '%' + '' + v.name
    if(text.length <= 8) {
        return text;
    } else if(text.length > 8 && text.length <= 16) {
        return text = `${text.slice(0,8)}\n${text.slice(8)}`
    } else if(text.length > 16 && text.length <= 24) {
        return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
    } else if(text.length > 24 && text.length <= 30) {
        return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
    } else if(text.length > 30) {
        return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
    }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM