echarts 关于axisLabel文字换行显示_echarts axislabel 换行

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
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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  
}  
1
2
3
4
5
6
7
8
9