項(xiàng)目中遇到需要展示一些柱狀圖，之前做相關(guān)功能時(shí)，橫坐標(biāo)x軸一直用的是時(shí)間，所以沒(méi)有注意到這個(gè)問(wèn)題。

如下圖所示：

當(dāng)x軸顯示的是”人名“這種類型的值的時(shí)候，這種顯示情況就有問(wèn)題了，這樣就不會(huì)知道，沒(méi)有顯示的具體是誰(shuí)。

解決這個(gè)問(wèn)題主要有兩種方法：

1. 讓所有的x軸的值顯示出來(lái)。
2. 鼠標(biāo)懸停顯示橫坐標(biāo)內(nèi)容。

從網(wǎng)上查到了一些方法，這里做一下總結(jié)。

首先嘗試第一種方法

1.讓所有的x軸的值顯示出來(lái)

讓x軸值全部顯示出來(lái)，一共有兩種方式：

第一種方式：

? 利用axisLabel，axisLabel主要用于坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。

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

? show:true, — 表示：是否顯示刻度標(biāo)簽（默認(rèn)值：true）

? interval: ‘a(chǎn)uto’， ---- 表示：采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽。（默認(rèn)值：auto）

? 除此之外，interval還可以設(shè)置具體的值，若是設(shè)置為1，表示隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽；若是設(shè)置為2，表示隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽。

這里，為了將x軸標(biāo)簽全顯示出來(lái)，給xAxis添加axisLabel元素，并將interval屬性設(shè)置為0。如下所示：

顯示效果如下：

x軸的所有數(shù)據(jù)都顯示出來(lái)了，但是由于空間不夠，造成了數(shù)據(jù)的重疊。這并不是我們想要的結(jié)果。

此時(shí)，想到axisLabel還有一個(gè)屬性rotate，它用來(lái)控制刻度標(biāo)簽旋轉(zhuǎn)的角度，在類目標(biāo)簽顯示占不下的時(shí)候可以通過(guò)旋轉(zhuǎn)防止標(biāo)簽之間的重疊。旋轉(zhuǎn)角度從-90度到90度。

故，在上面的基礎(chǔ)上，可以給文字加上一定程度的旋轉(zhuǎn)。

效果如下：

可以看到，這樣的話就會(huì)解決重疊的文字的問(wèn)題，但是這樣有一個(gè)弊端，就是當(dāng)我的x軸數(shù)據(jù)在增多的時(shí)候，x軸的標(biāo)簽依舊會(huì)重疊。如下所示：

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

第二種方式：

? 此時(shí)考慮第二種方式，echart中包含一個(gè)組件dataZoom，這個(gè)組件主要用于區(qū)域縮放。

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

? dataZoomInside：內(nèi)置于坐標(biāo)系中，使用戶可以在坐標(biāo)系上鼠標(biāo)拖拽、滑動(dòng)來(lái)縮放或滾動(dòng)坐標(biāo)系。（這種方式看不到滑塊）

? dataZoomSlider：有單獨(dú)的滑動(dòng)條，用戶在滑動(dòng)條上進(jìn)行縮放或滑動(dòng)。

? dataZoomSelect：提供一個(gè)選擇框進(jìn)行數(shù)據(jù)區(qū)域縮放，配置項(xiàng)在toolbox中。

dataZoom組件可同時(shí)存在多個(gè)，起到共同控制的左右。如果多個(gè)dataZoom組件共同控制同一個(gè)數(shù)軸，它們會(huì)自動(dòng)聯(lián)動(dòng)。

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

顯示如下：x軸標(biāo)簽數(shù)量少于25個(gè)的時(shí)候：

當(dāng)x軸標(biāo)簽數(shù)量大于25個(gè)的時(shí)候：

這樣能夠很好的解決問(wèn)題，拖拽窗口展示想要看到的區(qū)域。

2.鼠標(biāo)懸停顯示橫坐標(biāo)內(nèi)容

原本的設(shè)置是鼠標(biāo)懸停顯示y軸的坐標(biāo)值，現(xiàn)在可以設(shè)置鼠標(biāo)懸停同時(shí)顯示x軸和y軸的值。

這個(gè)使用了tooltip組件的formatter屬性

代碼如下：

顯示如下：

這樣鼠標(biāo)懸停時(shí)就會(huì)顯示具體的信息，也是一種解決方法。

不過(guò)若是在x軸數(shù)據(jù)量很龐大的情況下，還是推薦使用dataZoom組件。

更多關(guān)于dataZoom組件的知識(shí)，請(qǐng)去官網(wǎng)https://echarts.apache.org/zh/option.html#dataZoom