echarts Y轴文字内容太长导致显示不全

喵喵酱仔__

已于 2024-09-03 16:48:24 修改

阅读量1.8k

点赞数 11

分类专栏： echarts 新文章标签： echarts 前端 javascript

于 2024-09-03 16:35:39 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/141864992

版权

echarts 新专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方式一：省略号

如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。因为数据是由后端传过来的，有些会很长有些会比较短。这个时候就需要用一些别的属性。

1.在grid中使用containLabel属性

containLabel 为 true 的时候：

grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。

这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

  grid: {
    left: '4.5%',
    right: '2.5%',
    containLabel: true
  },

效果如下：

但是调整grid的属性会导致短数据前的留白过于多，布局不合理。

2.在yAxis中的axisLabel中加入overflow: 'truncate'

overflow: 'truncate'属性配置(将文字设置超出部分显示省略号)
文字超出宽度是否截断或者换行。配置width时有效。

'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
'break' 换行
'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

  yAxis: {
    show: true,
    type: 'category',
    axisLabel: {
      width: 75, //将内容的宽度固定
      overflow: 'truncate', //超出的部分截断
      ellipsis: '...' //截断的部分用...代替
    }
  },

效果如下：

方式二省略号+移入具体展示（用这个）

    function threeDot(str) {
        if (str.length <= 3) {
            return str;
        } else {
            var str1 = str.substring(0, 3);
            str1 += '...';
            return str1;
        }
    }
    option = {
        color: ['#20b1aa'],
        xAxis: {
            type: 'category',
            data: ['星期一 Monday', '星期二 Tuesday', '星期三 Wednesday', '星期四 Thursday', '星期五 Thursday', '星期六 Saturday', '星期日 Sunday'],
            triggerEvent: true,
            axisLabel: {
                interval: 0,
                rotate: 45,
                formatter: function(value) {
                    return threeDot(value)
                },
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 90],
            type: 'bar',
            barWidth: 40
        }]
    };
    myChart.on("mouseover", function(event) {
        console.log(event.event.event.clientX)
        if (event.componentType === "xAxis") {
            $("<span class='title' style='position:fixed;border-radius:3px; padding:3px;background-color:#20b1aa;'></span>").appendTo($("body")).text(event.value).css({
                top: event.event.event.clientY,
                left: event.event.event.clientX + 20
            });
        }
    })
    myChart.on("mousemove", function(event) {
        if (event.componentType === "xAxis") {
            $(".title").css({
                top: event.event.event.clientY,
                left: event.event.event.clientX + 20
            });
        }
    })
    myChart.on("mouseout", function() {
        $(".title").remove();
    })

参考：X轴文本过长, 显示省略号, 并增加自定义title文本. - category-work,grid直角坐标,series-bar柱状图 - makeapie echarts社区图表可视化案例

3.优化y坐标上的数字

如果在数据特别大的情况下，左边数据占得位置就会越来越宽，导致布局不好看，所以我们可以对这种数字进行处理一下

在yAxis的axisLabel属性中进行配置formatter

第一种：

formatter(value) {
    var newValue = value;
    var k = 10000, sizes = ['', '万', '亿', '万亿'], i;
    if(value < k){
        newValue = value
        unit = ''
    }else{
        i = Math.floor(Math.log(value) / Math.log(k)); 
        newValue = ((value / Math.pow(k, i))).toFixed(2);
        unit = sizes[i];
    }
    return newValue + unit;
},

第二种：

        formatter(v) {
                    v = v.toString()
                    if (v >= 100000000000) {
                        return (v.substring(0, 5) / 10) + '亿'
                    } else if (v >= 10000000000) {
                        return (v.substring(0, 4) / 10) + '亿'
                    } else if (v >= 1000000000) {
                        return (v.substring(0, 3) / 10) + '亿'
                    } else if (v >= 100000000) {
                        return (v.substring(0, 2) / 10) + '亿'
                    } else if (v >= 10000000) {
                        return v.substring(0, 4) + '万'
                    } else if (v >= 1000000) {
                        return v.substring(0, 3) + '万'
                    } else if (v >= 100000) {
                        return v.substring(0, 2) + '万'
                    } else if (v >= 10000) {
                        return (v.substring(0, 2) / 10) + '万'
                    } else if (v >= 1000) {
                        return v
                    } else {
                        return v
                    }
                },

yAxis.axisLabel. formatter

刻度标签的内容格式器，支持字符串模板和回调函数两种形式。

示例:

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}

对于时间轴（type: 'time'），formatter 的字符串模板支持多种形式：

字符串模板：简单快速实现常用日期时间模板，string 类型
回调函数：自定义 formatter，可以用来实现复杂高级的格式，Function 类型
分级模板：为不同时间粒度的标签使用不同的 formatter，object 类型

下面我们分别介绍这三种形式。

字符串模板

使用字符串模板是一种方便实现常用日期时间格式化方式的形式。如果字符串模板可以实现你的效果，那我们优先推荐使用此方式；如果无法实现，再考虑其他两种更复杂的方式。支持的模板如下：

其他语言请参考相应语言包中的定义，语言包可以通过 echarts.registerLocale 注册。

示例:

formatter: '{yyyy}-{MM}-{dd}' // 得到的 label 形如：'2020-12-02'
formatter: '{d}日' // 得到的 label 形如：'2日'

回调函数

回调函数可以根据刻度值返回不同的格式，如果有复杂的时间格式化需求，也可以引用第三方的日期时间相关的库（如 Moment.js、date-fns 等），返回显示的文本。

示例：

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getFullYear());
    }
    return texts.join('/');
}

分级模板

有时候，我们希望对不同的时间粒度采用不同的格式化策略。例如，在季度图表中，我们可能希望对每个月的第一天显示月份，而其他日期显示日期。我们可以使用以下方式实现该效果：

示例：

formatter: {
    month: '{MMMM}', // 一月、二月、……
    day: '{d}日' // 1日、2日、……
}

支持的分级以及各自默认的取值为：

{
    year: '{yyyy}',
    month: '{MMM}',
    day: '{d}',
    hour: '{HH}:{mm}',
    minute: '{HH}:{mm}',
    second: '{HH}:{mm}:{ss}',
    millisecond: '{hh}:{mm}:{ss} {SSS}',
    none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
}

以 day 为例，当一个刻度点的值的小时、分钟、秒、毫秒都为 0 时，将采用 day 的分级值作为模板。none 表示当其他规则都不适用时采用的模板，也就是带有毫秒值的刻度点的模板。

富文本

以上这三种形式的 formatter 都支持富文本，所以可以做成一些复杂的效果。

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: {
            // 一年的第一个月显示年度信息和月份信息
            year: '{yearStyle|{yyyy}}\n{monthStyle|{MMM}}',
            month: '{monthStyle|{MMM}}'
        },
        rich: {
            yearStyle: {
                // 让年度信息更醒目
                color: '#000',
                fontWeight: 'bold'
            },
            monthStyle: {
                color: '#999'
            }
        }
    }
},

使用回调函数形式实现上面例子同样的效果：

示例：

xAxis: {
    type: 'time',
    axisLabel: {
        formatter: function (value) {
            const date = new Date(value);
            const yearStart = new Date(value);
            yearStart.setMonth(0);
            yearStart.setDate(1);
            yearStart.setHours(0);
            yearStart.setMinutes(0);
            yearStart.setSeconds(0);
            yearStart.setMilliseconds(0);
            // 判断一个刻度值知否为一年的开始
            if (date.getTime() === yearStart.getTime()) {
                return '{year|' + date.getFullYear() + '}\n'
                    + '{month|' + (date.getMonth() + 1) + '月}';
            }
            else {
                return '{month|' + (date.getMonth() + 1) + '月}'
            }
        },
        rich: {
            year: {
                color: '#000',
                fontWeight: 'bold'
            },
            month: {
                color: '#999'
            }
        }
    }
},