树形关系展示

Echarts树关系展示

参考网友代码(不支持展开和收起) 修改后支持展开和收起的版本

  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
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        formatter:'{b0}'
    },
    series:[
        {
            type: 'tree',
            data: [
                    {
                        "name": "flare",
                        "children": [
                            {
                                "name": "cluster",
                                "children": [ // 示例子节点以支持展开收起
                                    {
                                        "name": "subCluster1"
                                    },
                                    {
                                        "name": "subCluster2"
                                    }
                                ]
                            },
                            {
                                "name": "AgglomerativeCluster"
                            },
                            {
                                "name": "CommunityStructure"
                            },
                            {
                                "name": "HierarchicalCluster"
                            },
                            {
                                "name": "MergeEdge"
                            }
                        ]
                    }
                ],
            height:'200px',
            width:'30%',
            top: '1%',
            left: '15%',
            bottom: '1%',
            right: '50%',
            symbolSize: 7,
            orient: 'RL',
            label: {
                    position: 'right',
                    verticalAlign: 'bottom',
                    align: 'right'
            },
            leaves: {
                label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right'
                }
            },
            expandAndCollapse: true, // 启用展开和收起
            animationDuration: 550,
            animationDurationUpdate: 750
        },
        {
            type: 'tree',
            data: [
                    {
                        "name": "",
                        "children": [
                            {
                                "name": "cluster",
                                "value": 3738
                            },
                            {
                                "name": "AgglomerativeCluster",
                                "value": 3938
                            },
                            {
                                "name": "CommunityStructure",
                                "value": 3812
                            },
                            {
                                "name": "HierarchicalCluster",
                                "value": 6714
                            },
                            {
                                "name": "MergeEdge",
                                "value": 743
                            }
                        ]
                    }
                ],
            height:'200px',
            width:'30%',
            top: '1%',
            left: '45%',
            bottom: '1%',
            right: '9%',
            symbolSize: 7,
            orient: 'LR',
            label: {
                    position: 'left',
                    verticalAlign: 'bottom',
                    align: 'center'
            },
            leaves: {
                label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                }
            },
            expandAndCollapse: true, // 启用展开和收起
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
};

实现双向树的关键在于使用了两个tree系列(series)来分别表示左侧和右侧的树,以及利用orient属性来控制树的方向。

两个tree系列:在提供的代码中,通过定义两个类型为tree的系列(series),每个系列分别绘制树的一侧。这种方法通过将数据分割成两部分来模拟双向树的效果,其中一部分数据用于左侧树的展示,另一部分数据用于右侧树的展示。

orient属性:每个tree系列使用了orient属性来控制树的生长方向。对于左侧的树(即左子树),orient被设置为’RL’(从右向左生长);而对于右侧的树(即右子树),orient被设置为’LR’(从左向右生长)。这样,树的两部分分别向相反方向生长,从而创造出双向树的视觉效果。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
series:[
    {
        type: 'tree',
        // 省略其他配置...
        orient: 'RL', // 控制树的生长方向为从右向左,用于左侧树
        // 省略其他配置...
    },
    {
        type: 'tree',
        // 省略其他配置...
        orient: 'LR', // 控制树的生长方向为从左向右,用于右侧树
        // 省略其他配置...
    }
]

text