echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法

iiiilooaixuud

已于 2024-06-03 14:31:32 修改

阅读量1.1k

点赞数 3

文章标签： echarts 前端 javascript

于 2024-06-03 14:30:12 首次发布

本文链接：https://blog.csdn.net/qq_46617584/article/details/139414015

版权

情况一：坐标上的内容是文字时

width: 60,//将内容的宽度固定
overflow: 'truncate',//超出的部分截断
truncate: '...',//截断的部分用...代替

情况二：如果纵坐标上是数字

grid: {
            top: "15%",
            left: "2%",
            right: "2%",
            bottom: "2%",
            containLabel: true
          },

情况三：文字换行

    xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
                var str = ""; 
                var num = 2; //每行显示字数 
                var valLength = value.length; //该项x轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
        }
    },