echarts x/y轴坐标文字过长解决办法-换行

柔情只为你懂 2022-12-10 07:20 293阅读 0赞

/**
     * Created by HanSon on 2016/1/24.
     */
    function newline(option, number, axis){
        /* 此处注意你的json是数组还是对象 */
        option[axis][0]['axisLabel']={
            interval: 0,
            formatter: function(params){
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = number;
                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 {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }
                } else {
                    newParamsName = params;
                }
                return newParamsName
            }
        }
        return option;
    }

# newline-echarts
    
    ###Introduce
    
    许多人使用百度的echarts.js时候会出现数据名太长覆盖的情况，newline-echarts.js能够很好解决这种换行问题
    
    
    ###Usage
    
    newline(option, 6, 'yAxis')
    * 参数一：是你的option
    * 参数二：是多少个字就换行
    * 参数三：是x轴还是y轴 可选项 'yAxis' OR 'xAxis'
    var chart = echarts.init(document.getElementById("main"));
    <script src="js/echarts.js"></script>
    var option = 
    {
        # your options
    }
    
    option = newline(option, 6, 'yAxis')
    chart.setOption(option)
    ##Example

原文网址：[https://blog.csdn.net/qq\_34531925/article/details/78258820][https_blog.csdn.net_qq_34531925_article_details_78258820]

[https_blog.csdn.net_qq_34531925_article_details_78258820]: https://blog.csdn.net/qq_34531925/article/details/78258820