zoukankan      html  css  js  c++  java
  • Echarts 饼图(series)标题文字太长的换行设置

    英文标题中,设置遇到空格换行 v.name.split(" ").join(" ")

    itemStyle: {
        normal: {
            label: {
                show: true,
                formatter: function(v) { //让series 中的文字进行换行
                    //文字中遇到空格就换行
                    let text = Math.round(v.percent)+'%' + "
    " + '{hr|}' + '' + v.name.split(" ").join("
    ");
                    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)}
    ${text.slice(8)}`
        } else if(text.length > 16 && text.length <= 24) {
            return text = `${text.slice(0,8)}
    ${text.slice(8,16)}
    ${text.slice(16)}`
        } else if(text.length > 24 && text.length <= 30) {
            return text = `${text.slice(0,8)}
    ${text.slice(8,16)}
    ${text.slice(16,24)}
    ${text.slice(24)}`
        } else if(text.length > 30) {
            return text = `${text.slice(0,8)}
    ${text.slice(8,16)}
    ${text.slice(16,24)}
    ${text.slice(24,30)}
    ${text.slice(30)}`
        }
    }
  • 相关阅读:
    设计模式-结构型模式总结
    设计模式-享元模式
    设计模式-组合模式
    设计模式-桥接模式
    设计模式-装饰器模式
    设计模式-外观模式
    设计模式-代理模式
    设计模式-适配器模式
    VMware该虚拟机似乎正在使用中
    BurpSuite-Burp Proxy
  • 原文地址:https://www.cnblogs.com/miny-simp/p/9547257.html
Copyright © 2011-2022 走看看