項目中遇到需要展示一些柱狀圖，之前做相關功能時，橫坐標x軸一直用的是時間，所以沒有注意到這個問題。

如下圖所示：

當x軸顯示的是”人名“這種類型的值的時候，這種顯示情況就有問題了，這樣就不會知道，沒有顯示的具體是誰。

解決這個問題主要有兩種方法：

1. 讓所有的x軸的值顯示出來。

2. 鼠標懸停顯示橫坐標內容。

從網上查到了一些方法，這里做一下總結。

首先嘗試第一種方法

1.讓所有的x軸的值顯示出來

讓x軸值全部顯示出來，一共有兩種方式：

第一種方式：

利用axisLabel，axisLabel主要用于坐標軸刻度標簽的相關設置。

 axisLabel有很多屬性，常用的如下所示：

 show:true, — 表示：是否顯示刻度標簽（默認值：true）

 interval: ‘auto’， ---- 表示：采用標簽不重疊的策略間隔顯示標簽。（默認值：auto）

除此之外，interval還可以設置具體的值，若是設置為1，表示隔一個標簽顯示一個標簽；若是設置為2，表示隔兩個標簽顯示一個標簽。

這里，為了將x軸標簽全顯示出來，給xAxis添加axisLabel元素，并將interval屬性設置為0。如下所示：

顯示效果如下：

x軸的所有數據都顯示出來了，但是由于空間不夠，造成了數據的重疊。這并不是我們想要的結果。

此時，想到axisLabel還有一個屬性rotate，它用來控制刻度標簽旋轉的角度，在類目標簽顯示占不下的時候可以通過旋轉防止標簽之間的重疊。旋轉角度從-90度到90度。

故，在上面的基礎上，可以給文字加上一定程度的旋轉。

效果如下：

可以看到，這樣的話就會解決重疊的文字的問題，但是這樣有一個弊端，就是當我的x軸數據在增多的時候，x軸的標簽依舊會重疊。如下所示：

所以，利用axisLabel的interval和rotate屬性，解決本文類似問題的前提條件是：x軸的數據量是在某個范圍之內，能夠正常顯示的。

第二種方式：

此時考慮第二種方式，echart中包含一個組件dataZoom，這個組件主要用于區域縮放。

主要有以下幾種類型的dataZoom組件，

 dataZoomInside：內置于坐標系中，使用戶可以在坐標系上鼠標拖拽、滑動來縮放或滾動坐標系。（這種方式看不到滑塊）

 dataZoomSlider：有單獨的滑動條，用戶在滑動條上進行縮放或滑動。

 dataZoomselect：提供一個選擇框進行數據區域縮放，配置項在toolbox中。

dataZoom組件可同時存在多個，起到共同控制的左右。如果多個dataZoom組件共同控制同一個數軸，它們會自動聯動。

為了更好的客戶體驗，inside和slider方式同時使用，在option里面加上dataZoom組件，代碼如下：

顯示如下：x軸標簽數量少于25個的時候：

當x軸標簽數量大于25個的時候：

這樣能夠很好的解決問題，拖拽窗口展示想要看到的區域。

2.鼠標懸停顯示橫坐標內容

原本的設置是鼠標懸停顯示y軸的坐標值，現在可以設置鼠標懸停同時顯示x軸和y軸的值。

這個使用了tooltip組件的formatter屬性

代碼如下：

顯示如下：

這樣鼠標懸停時就會顯示具體的信息，也是一種解決方法。

不過若是在x軸數據量很龐大的情況下，還是推薦使用dataZoom組件。

更多關于dataZoom組件的知識，請去官網https://echarts.apache.org/zh/option.html#dataZoom

————————————————

版權聲明：本文為CSDN博主「木木木華」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/catascdd/article/details/129163027