1、新建如下结构的测试文件 Echarts -- 07_tree -- Content -- echarts.min.js -- jquery-1.11.3.min.js -- EchartsTree.html


2、在测试页面中,添加基础树图的代码 1)树图默认从左到右展示,最左边是最顶级节点 2)设置series.expandAndCollapse = false 可以在展示的时候,展开所有叶子节点 3)设置series.expandAndCollapse = true 可以在展示的时候,折叠隐藏相对底层的子节点 4)通过children节点包含其孩子节点

3、基础树图运行效果如下

4、从上到下展示的树图,代码如下 1)series.orient = 'LR':水平 从 左 到 右 展示树 2)series.orient = 'RL':水平 从 右 到 左 展示树 3)series.orient = 'TB':垂直 从 上 到 下 展示树 4)series.orient = 'BT':垂直 从 下 到 上 展示树 5)以前版本的 series.orient = 'horizontal',相当于‘LR’ 6)以前版本的 series.orient = 'vertical',相当于‘TB’ 7)树形垂直展示后,相关叶子节点名字最好转向,否则,名字长了,可能会重叠

5、从上到下展示的树图,运行效果如下

6、动态获取数据,绘制树图,代码如下 1)从后台获取到的数据,赋值给option变量对应的属性,再重新绘制图形即可 2)此处仅演示改变节点之间的连线,不改变位置


7、动态获取数据,绘制树图,运行效果如下

