vue3中echarts柱状图横轴文字太多放不下怎么解决

问题：在做数据展示的时候，使用的是echarts，遇到了个问题，就是数据过多，但是设置的x轴的文字名称又太长，往往左边第一个或右边最后一个的名称展示不全，只有半个。

从网上找到了几种办法，但是最总实现的效果不能通过。

导致这个问题的原因就是，最边上的那条数据的宽度太小了，名称又远远超过这个宽度，再加上echarts默认的x轴文字是居中显示的。所以有一侧的名称显示不全。

解决办法：

1.  配置option设置中的grid；这个是设置图表四周的padding的，将左边或右边的padding增加到能显示全名称就行了。

   grid: {
         top: '10', // 距离容器上边界的距离
         right: '30', // 距离容器右边界的距离
         bottom: '0', // 距离容器下边界的距离
         left: '0', // 距离容器左边界的距离
         containLabel: true, // 包含标签的绘图区域
       },

2. x轴名称倾斜展示。在options配置中的xAxis中配置如下代码：

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

   

3. 名称竖直显示。在options配置中的xAxis中配置如下代码：

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

   

4. 在特定文字后面加换行处理。在options配置中的xAxis中配置如下代码：

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

   

后面三种方法全是从网上找到的：vue——echarts柱状图横轴文字太多放不下【处理办法】_echarts柱状图横坐标文字太长放不下两行放-CSDN博客