寫這個栗子的時候主要因為是剛剛做一個專案，要用到人物關係圖，所以一直在找合適外掛，最後選擇echarts2.0的tree圖最合適這個關係圖了。哈哈，話不多少，現在就把效果圖獻上吧。

ps:照片是網上下載的,莫要見外啊。
這個使用的是echarts2.X版本
HTML程式碼

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 600px;
        height: 327px;
        margin: auto;
    }
 
</style>
<div class="a" id="a"></div>

下面是js程式碼：

require.config({paths:{echarts:"plugins/echarts"}});
require(
    ["echarts","echarts/chart/tree"],
    function(ec){
        var myChart=ec.init(document.getElementById('a')); 
        var option={
            title : {
                show:false
 

            },
            tooltip : {
                trigger: 'item',
                formatter: "{b}"
                //formatter: "{b}: {c}"
            },
            //那個右上角的工具欄
            toolbox: {
                show : false,
            },
            calculable : false,
            series : [
                {
                    name:'樹圖'
 
,
                    type:'tree',
                    //排列方式，橫向、縱向
                    orient: 'vertical', 
                    //根節點的位置
                    rootLocation: {x: 'center',y: '10%'}, 
                    //連線線長度
                    layerPadding: 30,
                    //結點間距
                    nodePadding: 20,
                    //圖形形狀
                    symbol: 'circle',
                    //尺寸大小
                    symbolSize: 40,
                    //圖的一些樣式設定
                    itemStyle: {
                        //正常情況顯示
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',
                                textStyle: {
                                    //字型顏色、大小、加粗
                                    color: '#000',
                                    fontSize: 15,
                                    fontWeight:  'bolder'
                                }
                            },
                            color:'#fff',
                            lineStyle: {
                                color: '#000',
                                width: 1,
                                type: 'broken'
                            }
                        },
                        //滑鼠移上去樣式
                        emphasis: {
                            label: {
                                show: false,
                                textStyle:{
                                    align:'center',
                                    verticalAlign:'middle'
                                      }
                                  },
                                  color:'#fff',
                                   borderWidth: 1
                               }
                        },
                        data: [
                            {
                                name: '張三',
                                //圖片大小
                                symbolSize: [60, 80],
                                //圖片
                                symbol: 'image://img/zjz.jpg',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }
                                    }
                                },
                                children: [
                                    {
                                        name: '同戶',
                                        value: 4,
                                        symbol: 'circle',
                                        color:'#fff',
                                        itemStyle: {
                                             normal: {
                                                 label: {
                                                     show: true,
                                                     textStyle:{
                                                          align:'center',
                                                   verticalAlign:'middle'
                                                            }
                                                        },
                                                        color:'#fff',
                                                        borderWidth: 2,
                                                        borderColor: '#00A0E9'
                                                    }
                                                },
                                                symbolSize: [60, 60],
                                                children: [
                                                    {
                                                        name: '小明',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        //value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }

                                                        }
                                                    },
                                                    {
                                                        name: '小黃',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    }
                                                ]
                                            },
                                            {
                                                name: '同址',
                                                symbol: 'circle',
                                                symbolSize: [60, 60],
                                                itemStyle: {
                                                    normal: {
                                                        label: {
                                                            show: true,
                                                            textStyle:{
                                                                align:'center',
                                                                verticalAlign:'middle'
                                                            }
                                                        },
                                                        color:'#fff',
                                                        borderWidth: 2,
                                                        borderColor: '#007130'
                                                    }
                                                },
                                                children: [
                                                    {
                                                        name: '小明',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    },
                                                    {
                                                        name: '小黃',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    }
                                                ]
                                            },
                                            {
                                                name: '同案',
                                                symbol: 'circle',
                                                symbolSize: [60, 60],
                                                itemStyle: {
                                                    normal: {
                                                        label: {
                                                            show: true,
                                                            textStyle:{
                                                                align:'center',
                                                                verticalAlign:'middle'
                                                            }
                                                        },
                                                        color:'#fff',
                                                        borderWidth: 2,
                                                        borderColor: '#AC6A00'
                                                    }
                                                },
                                                children: [
                                                    {
                                                        name: '小明',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    },
                                                    {
                                                        name: '小黃',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    }
                                                ]
                                            },
                                            {
                                                name: '戶籍變動',
                                                symbol: 'circle',
                                                symbolSize: [60, 60],
                                                itemStyle: {
                                                    normal: {
                                                        label: {
                                                            show: true,
                                                            textStyle:{
                                                                align:'center',
                                                                verticalAlign:'middle'
                                                            }
                                                        },
                                                        color:'#fff',
                                                        borderWidth: 2,
                                                        borderColor: '#FF0000'
                                                    }
                                                },
                                                children: [
                                                    {
                                                        name: '小明',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    },
                                                    {
                                                        name: '小黃',
                                                        symbol: 'image://img/zjz.jpg',
                                                        symbolSize: [60, 80],
                                                        value: 4,
                                                        itemStyle: {
                                                            normal: {
                                                                label: {
                                                                    show: true,
                                                                    position: 'bottom'
                                                                }
                                                            }
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option);
                    var ecConfig = require('echarts/config');
                })

好了，這就是全部程式碼，可以檢視echarts文件檢視一下屬性配置。