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,
                  formatter: function (value) { if (value.length > 6) { return `${value.slice(0, 4)}...`; } return value; }

                }
              }
            ]

 

 

 

 

 

2.動態設置X軸標簽文字,當x軸數據有3條以上需要傾斜，否則就正常顯示

 

 

 

想要的效果：

 

 

改變rotate屬性

只需要一個三元表達式就搞定了

 

 

作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15243852.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。