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: 深度。。。
難道?。。。
沒錯,就是層級,正兒八經的介紹如下:
哈哈,一不小心觸碰機關,找到了升級的秘密。
看來平時多掌握點中國式英語也很有用啊!
另外我只想說,重在實踐。
前端的東西,是寫一下代碼就能看到效果的。因此上手、接受起來相對比較迅速。這也是我喜歡他的地方吧。
Echarts - 樹圖實現四個層級