echart 柱状图横坐标文字过长，如何旋转

原创已于 2023-03-22 15:33:14 修改 · 5.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-05-11 15:15:07 首次发布

echarts 专栏收录该内容

8 篇文章

订阅专栏

当ECharts柱状图的横坐标文字过长导致显示不全时，可以通过设置`rotate`属性来旋转轴标签。例如，将`option.xAxis[0].axisLabel.rotate`设为-60度可以倾斜文字，同时可以调整`fontSize`减小字体大小，确保所有标签都能完整显示。如需更小角度，可以尝试30度，以达到理想展示效果。

echart 柱状图横坐标文字过长，如何旋转

有时候，在用柱状图表的时候，如果横坐标文字过长，某些文字就会消失不显示，我们可以将其旋转一下，调整到合适的角度，就能正常显示横坐标文字了。

比如下面这样，某些文字已经消失：

在这里插入图片描述

修改 option.xAxis[0].axisLabel.rotate 值即可，

官方说明： https://echarts.apache.org/zh/option.html#xAxis.axisLabel.rotate

如下：

let option = {
          xAxis: [{
              type: 'category',
              data: [],
              axisLabel: {
                   rotate: -60, // 角度值：Number
                   fontSize: 11, // 顺便调小一点字体大小
              }
          }],
}