Echarts X轴文字过长设置超出隐藏显示省略号

本文介绍了如何在ECharts中设置X轴文字的省略显示和动态旋转。通过调整`axisLabel.formatter`和`axisLabel.rotate`属性,实现了当X轴数据过多时自动倾斜显示,以适应图表空间。同时展示了如何通过条件判断来决定是否倾斜X轴标签,达到理想显示效果。
摘要由CSDN通过智能技术生成

 倾斜显示之前写过了,在我Echarts标签里面可以找到。今天主要详解设置X轴文字省略显示、动态显示X轴标签文字 

1.设置X轴文字省略显示,直接贴代码

         xAxis: [
              {
                type: 'category',
                data: _this.qyjyNameList,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval: 0,
                  rotate: 40,

                    // 超过4个字显示省略号
                  formatter: function (value) {
                    if (value.length > 4) {
                      return `${value.slice(0, 4)}...`;
                    }
                    return value;
                  }

                }
              }
            ]

如图:

2.动态设置X轴标签文字,当x轴数据有3条以上需要倾斜,否则就正常显示

想要的效果:

改变rotate属性

只需要一个三元表达式就搞定了

作者:微微一笑绝绝子

出处:https://www.cnblogs.com/wwyxjjz/p/15243852.html

本博客文章均为作者原创,转载请注明作者和原文链接。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值