echarts 轴标签过长换行调整(可以自定义每行几个字符)

echarts 轴标签过长换行调整(可以自定义每行几个字符)

1.封装方法

// 封装字符太长换行
// charVal 字符
// num 每行能显示的字的个数
var charAdjust = function (charVal,num) {
    var newParamsName = ""; // 最终拼接成的字符串
    var paramsNameNumber = charVal.length; // 实际标签的个数
    var provideNumber = num; // 每行能显示的字的个数
    var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
    /**
     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
     */
    // 条件等同于rowNumber>1
    if (paramsNameNumber > provideNumber) {
        /** 循环每一行,p表示行 */
        for (var p = 0; p < rowNumber; p++) {
            var tempStr = ""; // 表示每一次截取的字符串
            var start = p * provideNumber; // 开始截取的位置
            var end = start + provideNumber; // 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = charVal.substring(start, paramsNameNumber);
            } else {
                // 每一次拼接字符串并换行
                tempStr = charVal.substring(start, end) + "\n";
            }
            newParamsName += tempStr; // 最终拼成的字符串
        }

    } else {
        // 将旧标签的值赋给新标签
        newParamsName = charVal;
    }
    //将最终的字符串返回
    return newParamsName
}

2.调用方法

//在xAxis或者yAxis的axisLabel(轴标签的formatter中调用)
//示例
xAxis: [{
                        name: '',
                        type: 'category',
                        boundaryGap: true,
                        data: xData,
                        // 轴线
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#608CB3',
                            }
                        },
                        // 轴刻度
                        axisTick: {
                            show: false,
                        },
                        // 轴标签
                        axisLabel: {
                            show: true,
                            rotate: -45,
                            interval: 0, //0强制显示所有标签 //1,2,3隔几个显示
                            color: '#ffffff',
                            fontSize: 8 * scale,
                            margin: 6 * scale,
                            formatter: function (params) {
                            //调用封装的方法
                            //params对应charVal 字符
                            //6对应num 每行能显示的字的个数
                                return charAdjust(params, 6)
                            }
                        },
                        // 区域中的分隔线
                        splitLine: {
                            show: false,
                        },
                        // 网格区域
                        splitArea: {
                            show: false,
                        }
                    }],