Echarts 画知识图谱

最新推荐文章于 2024-04-19 17:41:53 发布

theITcat

最新推荐文章于 2024-04-19 17:41:53 发布

阅读量2.2k

点赞数 2

分类专栏：知识图谱文章标签： echarts 知识图谱

本文链接：https://blog.csdn.net/theITcat/article/details/107768402

版权

知识图谱专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知识图谱demo</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
</body>
<script type="application/javascript">
$(function() {
    var mainDiv = $("#main")
    mainDiv.css("width", "100%");
    mainDiv.css("height", "1000px");
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [];
    graph = {  //图谱数据
        links: [ //links是关系，需指明source、target、id
            {
                id: 0,
                source: 0,
                target: 1
            },{
                id: 1,
                source: 2,
                target: 1
            },{
                id: 2,
                source: 1,
                target: 2
            }
        ],
        nodes: [ //nodes是节点
            {
                id: 0,
                draggable: true,  //可拖拽
                name: "Myriel",  //节点名称
                symbolSize: 10  //节点大小，必须指明，否则节点大小为0，不显示图谱
            },{
                id: 1,
                draggable: true,
                name: "Napoleon",
                symbolSize: 10
            },{
                id: 2,
                draggable: true,
                name: "Geborand",
                symbolSize: 10
            }
        ]
    }
    var option = {
        title: {
            text: 'Les Miserables',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animation: false,
        series : [
            {
                name: 'Les Miserables',
                type: 'graph',
                layout: 'force',
                data: graph.nodes, //节点
                links: graph.links, //关系
                categories: categories,
                roam: true,
                label: {
                    position: 'right'
                },
                force: {
                    repulsion: 50
                }
            }
        ]
    };
    myChart.setOption(option);
    console.log(myChart);
});
</script>
</html>

theITcat

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Echarts 画知识图谱

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>知识图谱demo</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://c.
复制链接

扫一扫

专栏目录