Echart 之 Axis label 字符数过长截取处理

当文字长度过长, 会压缩图表大小, 可能直接影响图表查看
图表中文字, 可以通过 \n 来换行,

axisLabel 配置

{
    xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            rotate: 60,
            formatter: function (value) {
                return spliceStr(value,30)
            }
        },
        boundaryGap: true,
    }
}

纯中文下截取

var spliceStr = function (value, len) {
    if (value.length <= len) {
        return value
    }
    
    var newValue = "";
    var k = 0;
    for (var i = Math.ceil(value.length / len); i > 0; i--) {
       
        newValue += value.substr(k, len) + (i == 1? '':'\n');
        k += len;
        
    }
    return newValue;
}
spliceStr('一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',15)

需求是在英文下截取, 可能会有中文

中文和英文长度截取不一致, 中文应该短一点, 而英文应该长一点, 按照 中文 = 英文 * 2 计算

如果逐个字符循环判断, 容易造成性能低下, 耗时过长

所以不考虑中英混排的极端情况, 基本可以满足常规显示

// len 按英文字符长度计算
var spliceStr = function (value, len) {

    var half_len = Math.ceil(len / 2);
    if(len > half_len && /[\u4e00-\u9fa5]/.test(value)){
        var zh_len = value.match(/[\u4e00-\u9fa5]/g).length;
        if(zh_len > half_len) {
            len = half_len
        }else{
            len = Math.ceil(len - zh_len/2);
        }
    }

    if (value.length <= len) {
        return value
    }
    
    var newValue = "";
    var addStr = "";
    var k = 0;
    for (var i = Math.ceil(value.length / len); i > 0; i--) {

        if (i == 1) {
            newValue += value.substr(k, len)
            k += len
            continue
        }

        var charStr = value.charAt(k + len);
        if (/\s/.test(charStr)) {
            addStr = '\n'  
            k++  // 英文单词之间的空格
        }
        else if (/[\u4e00-\u9fa5]/.test(charStr)) {
            addStr = '\n'  // 汉字
        } 
        else {
            addStr = '\n-'  // 英文单词中间断开
        }
        
        newValue += value.substr(k, len) + addStr;
        k += len;
    }
    return newValue;
}
spliceStr('一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十',30)