我相信很多人和我一樣，制作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： 深度。。。

難道？。。。

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

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

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

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

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

Echarts - 樹圖實現四個層級