之前給大家講過(guò)如何通過(guò)控制數(shù)據(jù)的間隔來(lái)實(shí)現(xiàn)避免x軸過(guò)于擁擠，其實(shí)還有另外一種方法就是設(shè)置滾動(dòng)條，其實(shí)echarts是有滾動(dòng)條這個(gè)屬性的只不過(guò)很丑，如下圖
這個(gè)屬性叫做dataZoom，有縮放的滾動(dòng)的功能，感興趣的大家可以了解一下，但是我們這里只需要滾動(dòng)條，那該怎么辦呢？其實(shí)完全可以配合css解決這個(gè)問(wèn)題。
這里給大家看一下我的區(qū)域劃分。
紅色的部分為一個(gè)div，綠色的頭部是一個(gè)div，黃色是一個(gè)div，css有一個(gè)屬性叫做overflow，當(dāng)他的屬性設(shè)置為hidden時(shí)，超出的文字或者圖片就會(huì)隱藏。還有他的衍生屬性overflow-x，這個(gè)屬性設(shè)置為auto時(shí)會(huì)自動(dòng)檢測(cè)內(nèi)容是否超出，超出顯示滾動(dòng)條。
注意，這里不能給紅色的div設(shè)置overflow，因?yàn)檫@樣，當(dāng)黃色框超出時(shí)，滾動(dòng)條會(huì)出現(xiàn)在紅色方塊下方，綠色方塊會(huì)隨著黃色方塊一起滾動(dòng)。所以我們要給黃色div設(shè)置overflow，在這個(gè)div里面放echarts的圖表。
Css的部分說(shuō)完，我們?cè)賮?lái)說(shuō)一下echarts部分，echarts本身自帶一個(gè)方法myChart.resize（），能夠讓圖表自適應(yīng)，我們也可以設(shè)置寬高，讓它成為固定值。
以下是我的動(dòng)態(tài)寬度的例子，以10條數(shù)據(jù)為界限，每多一條數(shù)據(jù)多出40像素，這樣圖表的每一條數(shù)據(jù)就會(huì)以一個(gè)大致固定的寬度無(wú)線向右延伸，overflow就會(huì)自動(dòng)顯示滾動(dòng)條。
這里剛開始是想找刻度與刻度之間的最小寬度來(lái)實(shí)現(xiàn)的，但我翻了翻官方文檔確實(shí)沒(méi)找到。min和max是最小刻度和最大刻度的限制，刻度之間的寬度應(yīng)該是自適應(yīng)的。0.0。
