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

 

 倾斜显示之前写过了，在我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
本博客文章均为作者原创，转载请注明作者和原文链接。