echarts横坐标过长

当使用echarts中的柱状图时，如果横坐标的文字过长导致显示不全，可以尝试以下两种解决办法：

第一种方法是在xAxis中加入`axisLabel:{interval:0}`，这样可以使横坐标的文字全部显示出来。具体代码如下：

xAxis: [
  {
    type: "category",
    axisLabel: {
      show: true,
      interval: 0, //使x轴横坐标全部显示
      textStyle: {
        color: "rgba(219,225,255,1)",
        margin: 15
      }
    },
    data: lineData.lineTimeData
  }
]

第二种方法是使用横坐标滚动条，可以让横坐标自动滚动显示。具体代码如下：

xAxis: {
  type: 'category',
  axisLabel: {
    interval: 0,
    rotate: 30
  }
},
dataZoom: [
  {
    show: true,
    start: 0,
    end: 50
  }
]

使用这两种方法可以解决echarts横坐标过长导致显示不全的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [使用echarts柱状图横坐标文字过长放不下，文字会被隐藏](https://blog.csdn.net/Gzzzzzh/article/details/108106211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [echart横坐标太长导致坐标显示不完全（三种方法）](https://blog.csdn.net/qq_37899792/article/details/90231093)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]