Несколько решений для слишком длинного текста по оси X Echarts

ECharts

Слишком много текста в метке оси x диаграммы приводит к неполному отображению


Решение 1. Свойство xAxis.axisLabel

  axisLabel: {  
    interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
    rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
  }


Если текст оси X слишком длинный, он будет заблокирован.В это время для решения этой проблемы можно использовать атрибут сетки.
Установите свойство сетки, чтобы определить размер графика, чтобы освободить место, чтобы на метке оси было достаточно места.

  grid: {
        x: 40,  //左
        y: 40,  //上
        x2: 40, //右
        y2: 50  //下
    },
    xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            rotate: -20
        }
    },


Решение 2. Вызвать средство форматирования для вертикального отображения текста

Если текст не особенно длинный, вы можете установить автоматический перенос текста и вызвать функцию обратного вызова форматирования для достижения этого.

   xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
               return value.split("").join("\n");  
            }
        }
    },


Попробуйте перенос из двух слов. следующим образом:

  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;
                } 
            }
        }
    },


Решение 3. Элементы категории по оси X разделены новой строкой (с использованием параметра индекса в средстве форматирования)


   xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value,index){  
                if (index % 2 != 0) {  
                    return '\n\n' + value;  
                }  
                else {  
                    return value;  
                } 
            }
        }
    },




Категории