echarts图表标签（axisLabel）折行

在项目中遇到了一个echarts图表标签过长需折行的需求，so引出这篇总结，啦啦啦有帮助就多多支持啦，撒花撒花撒花~~~~

在此不对echarts其他用法做解释，详细见echarts文档（点击前往）

附：此文章效果图

标注：

yAxis.axisLabel.formatter 回调函数 实现标签过长的换行处理

通过设置provideNumber，控制每行显示的字数

格式如下：

yAxis: {

  //其余属性在此省略
    axisLabel:{
　　　　　interval: 0,//标签设置为全部显示
        formatter : function(params){
           //在此写入折行函数
        }
    }
}

/*

折行函数

*/
function(params){ 
　　var newParamsName = "";// 最终拼接成的字符串 
　　var paramsNameNumber = params.length;// 实际标签的个数 
　　var provideNumber = 2;// 每行能显示的字的个数 
　　var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 计算行数，向上取整 
　　//判断是否需要换行
　　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 = params.substring(start, paramsNameNumber); 
　　　　　　} else { 
　　　　　　　　// 每一次拼接字符串并换行 
　　　　　　　　tempStr = params.substring(start, end) + "\n"; 
　　　　　　} 
　　　　　　newParamsName += tempStr;// 最终拼成的字符串 
　　　　} 
　　} else { 
　　　　// 将旧标签的值赋给新标签 
　　　　newParamsName = params; 
　　} 
　　return newParamsName 
}

我默默的认为自己的排版实在太丑，but望大家凑合欣赏吧。

如果疑问欢迎联系，留言评论。

>>>>>>>>>>

秒客网

echarts图表标签（axisLabel）折行

相关文章