echarts柱状图横坐标文字过长的解决办法

原创已于 2023-08-08 16:58:36 修改 · 4.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #vue.js

于 2023-07-31 18:01:52 首次发布

文章介绍了两种解决Echarts图表中横坐标文字过长导致堆积的方法：一是通过设置axisLabel的rotate和interval参数调整标签的旋转角度和显示间隔；二是使用formatter函数在标签过长时显示省略号。这两种方法能有效避免标签重叠，提高图表可读性。

背景：echarts图中横坐标显示的文字过长，导致字都堆积在一块如下图所示
在这里插入图片描述
解决办法
一：可以尝试修改‘axisLabel’的‘rotate’和‘interval’参数，‘rotate’参数可以设置标签的旋转角度，可以避免标签之间的重叠，‘interval’参数可以设置标签的显示间隔。如果设置为0，那么所有标签都会显示，如果标签过多或者标签内容过长，可能文字会出现重叠，可以适当调整此参数的值来避免标签重叠。

option = {
    xAxis: {
        data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        axisLabel: {
            interval: 0,
            rotate: 45
        }
    },
    // 其他配置项...
};

效果如下：
在这里插入图片描述

二：轴标签超过特定长度时显示为省略号，可以使用’formatter‘函数来实现，这个函数可以让你自定义如何显示轴标签，如下代码

option = {
    xAxis: {
        data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        axisLabel: {
            interval: 0,
            formatter: function(value) {
                // 如果标签长度超过4，将剩余的文字替换为省略号
                if (value.length > 4) {
                    return value.slice(0, 4) + '...';
                } else {
                    return value;
                }
            }else{
             return value;
        }
    },
    // 其他配置项...
}

若只需在特定分辨率宽度下使用此方法，可以先获取屏幕宽度

 axisLabel: {
              fontWeight: this.setWeight,
              interval: 0,
             formatter: function(value) {
                // 如果标签长度超过4，将剩余的文字替换为省略号
                if(window.innerWidth<=1366){
                 if (value.length > 3) {
                    return value.slice(0, 2) + '...';
                } else {
                    return value;
                }
                } 
            }
            },

效果如下：
在这里插入图片描述