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

peachban

已于 2024-01-10 10:07:47 修改

阅读量1.6k

点赞数 9

文章标签： echarts 前端 javascript

于 2024-01-10 10:00:39 首次发布

本文链接：https://blog.csdn.net/peachban/article/details/135495300

版权

如上图这样一个横向的柱状图，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'属性配置(将文字设置超出部分显示省略号)

文字超出宽度是否截断或者换行。配置width时有效。

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

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

效果如下：

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 类型

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

字符串模板

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

分类	模板	取值（英文）	取值（中文）
Year	{yyyy}	e.g., 2020, 2021, ...	例：2020, 2021, ...
	{yy}	00-99	00-99
Quarter	{Q}	1, 2, 3, 4	1, 2, 3, 4
Month	{MMMM}	e.g., January, February, ...	一月、二月、……
	{MMM}	e.g., Jan, Feb, ...	1月、2月、……
	{MM}	01-12	01-12
	{M}	1-12	1-12
Day of Month	{dd}	01-31	01-31
	{d}	1-31	1-31
Day of Week	{eeee}	Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday	星期日、星期一、星期二、星期三、星期四、星期五、星期六
	{ee}	Sun, Mon, Tues, Wed, Thu, Fri, Sat	日、一、二、三、四、五、六
	{e}	1-54	1-54
Hour	{HH}	00-23	00-23
	{H}	0-23	0-23
	{hh}	01-12	01-12
	{h}	1-12	1-12
Minute	{mm}	00-59	00-59
	{m}	0-59	0-59
Second	{ss}	00-59	00-59
	{s}	0-59	0-59
Millisecond	{SSS}	000-999	000-999
	{S}	0-999	0-999

其他语言请参考相应语言包中的定义，语言包可以通过 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'
            }
        }
    }
},