echarts 关于axisLabel文字换行显示
- axisLabel文字换行====》两种方式
- 方式一: 动态
- 方式二: js
- 代码: 写在var option={};之后,在myChart.setOption(option);之前
- 本文章 参考其他大神…
方式一:
/**
* 处理 axisLabel换行
* Axis.axisLabel.formatter 回调函数 实现标签过长的换行处理
* 通过设置provideNumber,控制每行显示的字数
* 代码段写在var option={};之后,在myChart.setOption(option);之前
*/
option.xAxis.axisLabel = {
interval: 0, //标签设置为全部显示
formatter: function (params) {
//粘贴以下function内未注释的代码
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 5; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话,需要显示几行,向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
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
}
}
js实现
formatter:function(val){
var strs = val.split('');
var str = ''
for (var i = 0, s; s = strs[i++];) {
str += s;
if (!(i % 4)) str += '\n';
}
return str
}