vue——echarts柱状图横轴文字太多放不下【处理办法】

1. 如果单纯是文字太多，且中间无法分割开的话，可以采用两种方式：

• 文字倾斜展示
  效果：

在options配置中的xAxis中配置如下代码：

axisLabel: {
              interval: 0,
              rotate: 40,
            },

• 文字竖直显示
  效果：
  
  在options配置中的xAxis中配置如下代码：

axisLabel: {
              interval: 0,
              formatter: function (value) {
                return value.split("").join("\n");
              },
		}

前两种是我从网上学习来的，引用自 https://blog.csdn.net/superlover_/article/details/79714823，他的文章会更加全面一些。但是由于我的横轴文字是可以根据下划线分割的，所以就有了第三种。

2. 特定文字后面加换行：

效果

在options配置中的xAxis中配置如下代码：

axisLabel: {
              interval: 0,
              lineHeight: 18,
              formatter: function (value) {
                return value.split("_").join("_\n");
              },
            },