echarts - 樹圖實現四個層級

我相信不少人和我同樣，製做echats圖標時，都會先去demo官網找相同的或者近似的效果，而後再此基礎上改進成咱們想要的那個。

可是近期混跡某微信羣時，我看到一個羣友拋出問題說，echarts畫樹狀圖，本身有四層數據，可是隻有三層渲染出來了。

我跟他說你去ecahrts官網找個四級的。我記得有的。

他說官網的也只有三層，還截圖給我看，

我不死心的去官網找：http://echarts.baidu.com/examples/index.html?theme=light#chart-type-tree

果真仍是被我找到了：

數據太多，勉強觀看。

我甚至還能搞成五層

不賣關子。其實我也是直接在官網找的demo，只不過不是她找的那麼直觀的demo，只不過作了小小的修改：

縱觀官網這幾個demo ，若是要他的從左向右的樹狀圖的話，都是三級的。

不過漏掉了一個，左下角這個徑向圖。他實際上是四級的啊。

若是找到他四級的祕密或者說直接將其變成樹狀圖，那不就大功告成！

而個人實現也確實如此：

第一種是直接將其變成樹圖

第二種是利用其四級的祕密，直接修改樹圖的層級。

 首先說第一種，我將徑向圖改爲正常的樹圖。由於徑向圖就是從樹圖改編而來，再將其變回原型不是什麼難事，只須要一個屬性的修改：

正交仍是徑向，一鍵配置，爲所欲爲。

打開官網徑向圖的demo配置，能夠看到layout處的設置正是radial。我直接將其改爲了default，而後就變成了上圖四級樹圖的效果。很easy。

 

而後說第二種方法，不裝*的說，我也是無心看到的，一個讓我眼前發亮的單詞：initialTreeDepth

Tree： 數、Depth： 深度。。。

難道？。。。

沒錯，就是層級，正兒八經的介紹以下：

哈哈，一不當心觸碰機關，找到了升級的祕密。

看來平時多掌握點中國式英語也頗有用啊！

 

 

另外我只想說，重在實踐。

前端的東西，是寫一下代碼就能看到效果的。所以上手、接受起來相對比較迅速。這也是我喜歡他的地方吧。