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

最新推荐文章于 2024-08-12 15:48:59 发布

你走开``

最新推荐文章于 2024-08-12 15:48:59 发布

阅读量2.1w

点赞数

分类专栏：图表

图表专栏收录该内容

6 篇文章 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