星状图 散列图 树状图

sunburst-book

地址：

Examples - Apache ECharts (incubating)

https://echarts.apache.org/examples/zh/editor.html?c=sunburst-book

效果：

星状图 放射状 人物关系图

人物关系图

代码：

option = {
    title: { text: '联系人图谱' },
    tooltip: {
        formatter: function (x) {
            return x.data.des;
        }
    },
    series: [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 80,
            roam: true,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            // draggable: true,
            draggable: false,
            itemStyle: {
                normal: {
                    color: '#4b565b'
                }
            },
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b'

                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                    }
                }
            },
            data: [
                {
                    name: '我',
                    des: '',
                    symbolSize: 100,
                    itemStyle: {
                    normal: {
                        color: 'red',
                    }
                }
                }, 
                {
                    name: '侯亮平',
                    des: '',
                    symbolSize: 40,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '祁同伟',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                    normal: {
                        color: 'blue'
                    }
                }
                },
                {
                    name: '高小凤',
                    symbolSize: 50,
                    itemStyle: {
                    normal: {
                        color: 'blue'
                    }
                }
                }, 
                {
                    name: '吴惠芬',
                    des: '',
                    symbolSize: 70,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陈海',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '赵东来',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '梁璐',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陈岩石',
                    des: '',
                    symbolSize: 70,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '李达康',
                    des: '',
                    symbolSize: 60,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '高小琴',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '陆亦可',
                    des: '',
                    symbolSize: 50,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
                {
                    name: '吴心怡',
                    des: '',
                    symbolSize: 40,
                    itemStyle: {
                        normal: {
                            color: 'blue'
                        }
                    }
                },
            ],
            links: [
                {
                    source: '我',
                    target: '侯亮平',
                    name: '',
                    des: '侯亮平是我的得意门生'
                }, {
                    source: '我',
                    target: '祁同伟',
                    name: ''
                }, 
                {
                source: '我',
                target: '高小凤',
                name: ""
                },
                {
                source: '我',
                target: '吴惠芬',
                name: ""
                },
                {
                source: '我',
                target: '陈海',
                name: ""
                },
                {
                source: '我',
                target: '赵东来',
                name: ""
                },
                {
                source: '我',
                target: '梁璐',
                name: ""
                },
                {
                source: '我',
                target: '陈岩石',
                name: ""
                },
                {
                source: '我',
                target: '李达康',
                name: ""
                },
                {
                source: '我',
                target: '高小琴',
                name: ""
                },
                {
                source: '我',
                target: '陆亦可',
                name: ""
                },
                {
                source: '我',
                target: '吴心怡',
                name: ""
                },
            ]
        }
    ]
};

效果：

graph-npm

Examples - Apache ECharts

https://echarts.apache.org/examples/zh/editor.html?c=graph-npm

效果：