美文网首页
echarts3绘制拓扑图

echarts3绘制拓扑图

作者: web_柚子小记 | 来源:发表于2019-04-01 14:13 被阅读0次
    效果图: image.png

    配置:

    var option = {
                title: {
                    text: '人物关系拓扑图',
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'normal'
                    },
                    padding: [10, 0, 10, -90],
                    left: '50%'
                },
                tooltip: {},
                animationDuration: 1,
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12
                        },
                    }
                },
                legend: {
                    x: "center",
                    show: false,
                    data: ["事件", "人物"]
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: 1000,
                            gravity: 0.01
                        },
                        symbolSize: 45,
                        focusNodeAdjacency: true,
                        roam: 'scale',
                        categories: [{
                            name: '事件',
                            itemStyle: {
                                normal: {
                                    color: "#fff",
                                }
                            }
                        }, {
                            name: '人物',
                            itemStyle: {
                                normal: {
                                    color: "#fff",
                                }
                            }
                        }],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color: '#333'
                                }
                            }
                        },
                        nodes: [{
                            name: '事件1',
                            id: '10000',
                            category: 0,
                            x: point1.x,
                            y: point1.y,
                            fixed: true,
                            symbolSize: 60
                        }, {
                            name: '付世文',
                            id: '10001',
                            category: 1
                        }, {
                            name: '邓志荣',
                            id: '10002',
                            category: 1
                        }, {
                            name: '李荣庆',
                            id: '10003',
                            category: 1
                        }, {
                            name: '郑志勇',
                            id: '10004',
                            category: 1
                        }, {
                            name: '事件2',
                            id: '20000',
                            category: 0,
                            x: point2.x,
                            y: point2.y,
                            fixed: true,
                            symbolSize: 60
                        }, {
                            name: '赵英杰',
                            id: '20001',
                            category: 1
                        }, {
                            name: '王承军',
                            id: '20002',
                            category: 1
                        }, {
                            name: '陈卫东',
                            id: '20003',
                            category: 1
                        }, {
                            name: '邹劲松',
                            id: '20004',
                            category: 1
                        }, {
                            name: '事件3',
                            id: '30000',
                            category: 0,
                            x: point3.x,
                            y: point3.y,
                            fixed: true,
                            symbolSize: 60
                        }, {
                            name: '赵成',
                            id: '30001',
                            category: 1
                        }, {
                            name: '陈现忠',
                            id: '30002',
                            category: 1
                        }, {
                            name: '陶泳',
                            id: '30003',
                            category: 1
                        }, {
                            name: '王德福',
                            id: '30004',
                            category: 1
                        }],
                        links: [{
                            source: '10000',
                            target: '10001',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(225,84,78)'
                                }
                            }
                        }, {
                            source: '10000',
                            target: '10002',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(225,84,78)'
                                }
                            }
                        }, {
                            source: '10000',
                            target: '10003',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(225,84,78)'
                                }
                            }
                        }, {
                            source: '10000',
                            target: '10004',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(225,84,78)'
                                }
                            }
                        }, {
                            source: '20000',
                            target: '20001',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(253,177,56)'
                                }
                            }
                        }, {
                            source: '20000',
                            target: '20002',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(253,177,56)'
                                }
                            }
                        }, {
                            source: '20000',
                            target: '20003',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(253,177,56)'
                                }
                            }
                        }, {
                            source: '20000',
                            target: '20004',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(253,177,56)'
                                }
                            }
                        }, {
                            source: '30000',
                            target: '30001',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(110,197,75)'
                                }
                            }
                        }, {
                            source: '30000',
                            target: '30002',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(110,197,75)'
                                }
                            }
                        }, {
                            source: '30000',
                            target: '30003',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(110,197,75)'
                                }
                            }
                        }, {
                            source: '30000',
                            target: '30004',
                            lineStyle: {
                                normal: {
                                    color: 'rgb(110,197,75)'
                                }
                            }
                        }, {
                            source: '20001',
                            target: '30002',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '30003',
                            target: '20001',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '20004',
                            target: '10004',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '30003',
                            target: '10003',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '10002',
                            target: '30002',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '20004',
                            target: '30001',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }, {
                            source: '30000',
                            target: '10000',
                            lineStyle: {
                                normal: {
                                    type: 'curve',
                                    color: 'rgb(1,252,247)',
                                    curveness: 0.5
                                }
                            }
                        }],
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                opacity: 1,
                                width: 2,
                                curveness: 0
                            }
                        }
                    }
                ]
            };
    

    传送门:
    https://github.com/Youzi-wr/echarts-topology/tree/master

    相关文章

      网友评论

          本文标题:echarts3绘制拓扑图

          本文链接:https://www.haomeiwen.com/subject/pmtvbqtx.html