之前給大家講過如何通過控制數(shù)據(jù)的間隔來實現(xiàn)避免x軸過于擁擠，其實還有另外一種方法就是設(shè)置滾動條，其實echarts是有滾動條這個屬性的只不過很丑，如下圖

    這個屬性叫做dataZoom，有縮放的滾動的功能，感興趣的大家可以了解一下，但是我們這里只需要滾動條，那該怎么辦呢？其實完全可以配合css解決這個問題。

    這里給大家看一下我的區(qū)域劃分。

    紅色的部分為一個div，綠色的頭部是一個div，黃色是一個div，css有一個屬性叫做overflow，當(dāng)他的屬性設(shè)置為hidden時，超出的文字或者圖片就會隱藏。還有他的衍生屬性overflow-x，這個屬性設(shè)置為auto時會自動檢測內(nèi)容是否超出，超出顯示滾動條。

    注意，這里不能給紅色的div設(shè)置overflow，因為這樣，當(dāng)黃色框超出時，滾動條會出現(xiàn)在紅色方塊下方，綠色方塊會隨著黃色方塊一起滾動。所以我們要給黃色div設(shè)置overflow，在這個div里面放echarts的圖表。

    Css的部分說完，我們再來說一下echarts部分，echarts本身自帶一個方法myChart.resize（），能夠讓圖表自適應(yīng)，我們也可以設(shè)置寬高，讓它成為固定值。

    以下是我的動態(tài)寬度的例子，以10條數(shù)據(jù)為界限，每多一條數(shù)據(jù)多出40像素，這樣圖表的每一條數(shù)據(jù)就會以一個大致固定的寬度無線向右延伸，overflow就會自動顯示滾動條。

    這里剛開始是想找刻度與刻度之間的最小寬度來實現(xiàn)的，但我翻了翻官方文檔確實沒找到。min和max是最小刻度和最大刻度的限制，刻度之間的寬度應(yīng)該是自適應(yīng)的。0.0。