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,
                        }
                    }],
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值