echarts tree树形结构图_echarts tree edgeforkposition配置

具有唯一的根节点

1、配置data
	data:[
		{
		    name: "flare",    根节点名称
		    label: {          此节点特殊的 label 配置（如果需要的话）。
		        ...           
		    },
		    itemStyle: {},
		    value: 4116, 			value 值,只在tooltip中显示
		    collapsed: null, 		如果为true,表示此节点默认折叠。
		    ...
		    children: [
		        {
		       		...
		        },
		        ...
		    ]
		};
	]
2、主要配置
	series:[{
		type:'tree',
		layout 
			'orthogonal'	正交布局,包括水平和垂直方向
			'radial'		径向布局,是指以根节点为圆心,每一层节点为环,一层层向外发散绘制而成的布局
		orient	树图中,正交布局的方向
			'LR' , 'RL', 'TB', 'BT'
		symbol:'emptyCircle'	节点图形
		edgeShape	树图在正交布局下边的形状,曲线和折线
			'curve'
			'polyline'
		 edgeForkPosition:'50%'	当边的形状是折线时,子树中折线段分叉的位置,这里的位置指的是分叉点与子树父节点的距离占整个子树高度的百分比
		 initialTreeDepth:2		树图初始展开的层级深度
		 leaves:{	叶子节点(无子节点)的配置
		 	label:{},
		 	itemStyle:{},
		 	emphasis:{},
		 	...
		 }
	}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

效果图:

代码示例:

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series:[
            {
                type: 'tree',

                data: [data],

                left: '2%',
                right: '2%',
                top: '8%',
                bottom: '20%',

                symbol: 'emptyCircle',

                orient: 'vertical',

                expandAndCollapse: true,

                label: {
                    position: 'top',
                    rotate: -90,
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 9
                },

                leaves: {
                    label: {
                        position: 'bottom',
                        rotate: -90,
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },

                animationDurationUpdate: 750
            }
        ]
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48