1. 程式人生 > >Echarts - 樹圖實現四個層級

Echarts - 樹圖實現四個層級

-type 似的 記得 接受 examples 樹狀圖 因此 利用 屬性

我相信很多人和我一樣,制作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 - 樹圖實現四個層級