知识图谱可视化——echarts实现单击加入节点

讲解视频效果图单击话题分析后源代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min

笼中小夜莺

5238人浏览 · 2021-05-01 00:35:50

笼中小夜莺 · 2021-05-01 00:35:50 发布

讲解视频

https://www.bilibili.com/video/BV1gZ4y1F7Vx

效果图

在这里插入图片描述
单击话题分析后

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div id="OdfMes" style="width: 1800px;height: 800px;float: right"></div>
</body>
<script>
    var datas = [{
        name: '校园大数据',
        symbolSize: 120,
        // draggable: true,//加上这句话后不可点击
        category: 0,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 6,
                shadowBlur: 20,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        }
    }, {
        name: '舆情大数据',
        symbolSize: 100,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        category: 1,

    }, {
        name: '用户分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '话题分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '评论分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '图书馆分析',
        symbolSize: 100,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '借阅分析',
        symbolSize: 80,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#b457ff',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#b457ff',
                color: '#001c43'
            }
        },

    }, {
        name: '借阅排行',
        symbolSize: 80,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'

            }
        },
        category: 2,

    }, {
        name: '图书收录',
        symbolSize: 80,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'
            }
        },
        category: 2,

    }, {
        name: '图书分析',
        symbolSize: 80,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'
            }
        },
    }];
    var linkmes = [{
            source: '校园大数据',
            target: '舆情大数据',
            value: 'DNA'
        }, {
            source: '校园大数据',
            target: '图书馆分析',
            value: 'DNA'
        }, {
            source: '舆情大数据',
            target: '用户分析',
            value: 'DNA'
        },
        //  {
        //     source: '用户分析',
        //     target: '舆情大数据',
        //     value: '哇哦！'
        // }, 
        {
            source: '舆情大数据',
            target: '话题分析',
            value: 'DNA'
        }, {
            source: '舆情大数据',
            target: '评论分析',
            value: 'DNA'
        }, {
            source: '校园大数据',
            target: '图书馆分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '图书分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '借阅分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '借阅排行',
            value: 'DNA',
        }, {
            source: '图书馆分析',
            target: '图书收录',
            value: 'DNA'
        }
    ]; //连接的信息

    $(function() {
        var myChart = echarts.init(document.getElementById('OdfMes'));
        option = {
            backgroundColor: '#1a4377',

            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            color: ['#83e0ff', '#45f5ce', '#b158ff'],
            series: [{
                type: 'graph',
                layout: 'force',
                force: {
                    repulsion: 1000,
                    edgeLength: 50
                },
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                data: datas,
                links: linkmes,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 5,
                        curveness: 0
                    }
                },
                categories: [{
                    name: '0'
                }, {
                    name: '1'
                }, {
                    name: '2'
                }]
            }]
        }
        myChart.setOption(option);
        myChart.on('click', function(params) {
            if (params.name != null) {
                //var mes=params.name.replace(/\d+/g,"")
                console.log(params);
                if (params.name == "话题分析") {
                    //更新节点
                    datas.push({
                        name: '图书分析a',
                        symbolSize: 80,
                        category: 2,
                        itemStyle: {
                            normal: {
                                borderColor: '#82dffe',
                                borderWidth: 4,
                                shadowBlur: 10,
                                shadowColor: '#04f2a7',
                                color: '#001c43'
                            }
                        }
                    });
                    //更新边的关系
                    linkmes.push({
                        source: '图书分析a',
                        target: '话题分析'
                    });
                    //重新画图
                    myChart.setOption({
                        series: [{
                            data: datas,
                            links: linkmes
                        }]
                    });

                }
            }
        })
    })
</script>

</html>