Echarts 标签过长如何让axisLabel换行、省略显示、X轴字体大小颜色设置

系统管理员 2022-05-23 09:13 801阅读 0赞

js代码：

option = \{  
    xAxis: \{  
        type: 'category',  
        data: \['Mon-542-安徽合肥市蜀山区五里墩街道', 'Tue', 'Wed', 'Thu','fri','sat','sun'\],  
        axisLabel : \{  
            interval : 0,  
            textStyle:\{  
                 color:"red", //刻度颜色  
                 fontSize:16  //刻度大小  
            \},  
            formatter : function(params)\{  
                var newParamsName = "";  
                var paramsNameNumber = params.length;  
                var provideNumber = 4;  
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);  
                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 \{  
                            if(p > 2)\{  
                                tempStr = "...";  
                                newParamsName += tempStr;  
                                break;  
                            \}else\{  
                                tempStr = params.substring(start, end);  
                                if(p < 2)\{  
                                    tempStr += "\\n";  
                                \}  
                            \}  
                        \}  
                        newParamsName += tempStr;  
                    \}  
      
                \} else \{  
                    newParamsName = params;  
                \}  
                return newParamsName  
            \}  
        \}  
    \},  
    yAxis: \{  
        type: 'value'  
    \},  
    series: \[\{  
        data: \[120, 200, 150, 80, 70, 110, 130\],  
        type: 'bar'  
    \}\]  
\};

显示效果：

![20180606112310681][]

示例运行网址：[http://echarts.baidu.com/examples/editor.html?c=bar-simple][http_echarts.baidu.com_examples_editor.html_c_bar-simple]

参照网址：[https://blog.csdn.net/r4nqian/article/details/47834093][https_blog.csdn.net_r4nqian_article_details_47834093]

[20180606112310681]: /images/20220523/8e5d7c9b8b1649ffbcc13cdd5988b288.png
[http_echarts.baidu.com_examples_editor.html_c_bar-simple]: http://echarts.baidu.com/examples/editor.html?c=bar-simple
[https_blog.csdn.net_r4nqian_article_details_47834093]: https://blog.csdn.net/r4nqian/article/details/47834093