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


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

紅色的部分為一個div,綠色的頭部是一個div,黃色是一個div,css有一個屬性叫做overflow,當他的屬性設置為hidden時,超出的文字或者圖片就會隱藏。還有他的衍生屬性overflow-x,這個屬性設置為auto時會自動檢測內容是否超出,超出顯示滾動條。
注意,這里不能給紅色的div設置overflow,因為這樣,當黃色框超出時,滾動條會出現在紅色方塊下方,綠色方塊會隨著黃色方塊一起滾動。所以我們要給黃色div設置overflow,在這個div里面放echarts的圖表。

Css的部分說完,我們再來說一下echarts部分,echarts本身自帶一個方法myChart.resize(),能夠讓圖表自適應,我們也可以設置寬高,讓它成為固定值。
以下是我的動態寬度的例子,以10條數據為界限,每多一條數據多出40像素,這樣圖表的每一條數據就會以一個大致固定的寬度無線向右延伸,overflow就會自動顯示滾動條。

這里剛開始是想找刻度與刻度之間的最小寬度來實現的,但我翻了翻官方文檔確實沒找到。min和max是最小刻度和最大刻度的限制,刻度之間的寬度應該是自適應的。0.0。
下一篇: Echarts清空畫布



