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