echarts X轴文本数据太长溢出问题

// 1.方法一
// 在宽度有限,数据偏多的情况下,我们会遇到第一个和最后一个数据溢出问题,针对这个问题官方文档给出的解决方法是使X轴数据倾斜显示。
axisLabel: { // 坐标轴刻度标签的相关设置
    interval: 0,// 设置这个强制显示所有标签文字
    rotate:'45',// 旋转度数
}

// 方法二:使用formatter函数,给xAxis的formatter配置项返回一个字符串来达到,换行显示文本的效果

// 文字竖排显示
axisLabel: { // 坐标轴刻度标签的相关设置
    interval: 0,
    formatter:function(value){  
        return value.split("").join("\n");  
    },
}

// 文字横排显示
axisLabel: {
    interval: 0,
    formatter: function (value) {
        var ret = ""; //拼接加\n返回的类目项  
        var maxLength = 5; //每项显示文字个数  
        var valLength = value.length; //X轴类目项的文字个数  
        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
        if (rowN > 1) //如果类目项的文字大于5,  
        {
            for (var i = 0; i < rowN; i++) {
                var temp = ""; //每次截取的字符串  
                var start = i * maxLength; //开始截取的位置  
                var end = start + maxLength; //结束截取的位置  
                //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串  
            }
            return ret;
        } else {
            return value;
        }
    }
}

axisLabel: {
    formatter: function (params) {
        var newParamsName = '' // 拼接后的新字符串
        var paramsNameNumber = params.length // 实际标签数
        var provideNumber = 5 // 每行显示的字数
        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 如需换回,算出要显示的行数
        if (paramsNameNumber > provideNumber) {
            /** 循环每一行,p表示行 */
            for (var i = 0; i < rowNumber; i++) {
                var tempStr = '' // 每次截取的字符串
                var start = i * provideNumber // 截取位置开始
                var end = start + provideNumber // 截取位置结束
                if (end > provideNumber * 2) {
                    newParamsName += '...'
                    break
                    // 最后一行的需要单独处理
                } else {
                    if (i === rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber)
                    } else {
                        tempStr = params.substring(start, end) + '\n'
                    }
                }
                newParamsName += tempStr
            }
        } else {
            newParamsName = params
        }
        return newParamsName
    },
}

//超出显示...
axisLabel: {
  formatter: function (params, index) {
    const chat = 4 // 想要获取的字节长度
      if (params.length > chat) {
        return params.substring(0, chat) + '...'
      } else {
        return params
      }
  },
}

你可能感兴趣的:(学习笔记,echarts,javascript,前端)