如何在網(wǎng)頁(yè)前端里可視化你的知識(shí)圖譜
最近費(fèi)盡千辛萬(wàn)苦構(gòu)造了一份可以用（大概）的知識(shí)圖譜，并且把要利用知識(shí)圖譜做的領(lǐng)域命名實(shí)體識(shí)別和一些推薦的功能做成Web版的demo，順帶想實(shí)現(xiàn)一些可視化知識(shí)圖譜的功能。

（憑啥知識(shí)圖譜就只能在Neo4j里自嗨，不能來(lái)前端show一下，歧視嗎(￢_￢)）

找了做前端圖表展示的開(kāi)源庫(kù)，D3.js和Echarts都能做，我拿Echarts實(shí)現(xiàn)了一下功能，先看一下在現(xiàn)在項(xiàng)目里一個(gè)基于知識(shí)圖譜查詢的實(shí)際效果：

接下里看看如何的實(shí)現(xiàn)：

1. 首先在本地下載Echarts相關(guān)的js文件，在線引用也可以，html文件里如下引用：

 <script src="/static/js/echarts.common.min.js"></script>   
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>

給要展示的圖準(zhǔn)備一個(gè)Dom：

<!-- 為ECharts準(zhǔn)備一個(gè)具備大小的Dom -->
    <div class = "col-md-12">
        <div class="panel panel-default ">
            <header class="panel-heading">
                關(guān)系圖 :
            </header>
            <div class = "panel-body ">
                <div id="graph" style="width: 100%;height:600px;"></div>
            </div>
        </div>
    </div>

3.設(shè)置好節(jié)點(diǎn)和鏈接關(guān)系,這里為了簡(jiǎn)單手寫了一個(gè)蘋果梨子和水果之間的關(guān)系，項(xiàng)目里采用Django框架的交互讀取查詢的結(jié)果放入節(jié)點(diǎn)（data）和鏈接（links）里面了：

data = [
        {name:'蘋果',category:1,id:0},
        {name:'梨子',catagory:1,id:1},
        {name:'水果',category:2,id:2}
        ]
    links = [
        {source:0,target:2,category:0,value:'屬于',symbolSize:10},
        {source:1,target:2,category:0,value:'屬于',symbolSize:10}
    ]

置Echarts圖：

var myChart = echarts.init(document.getElementById('graph'));

    option = {
        title: {
            text: ''
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12
                },
            }
        },
        legend: {
            x: "center",
            show: false
        },
        series: [

            {
                type: 'graph',
                layout: 'force',
                symbolSize: 45,
                focusNodeAdjacency: true,
                roam: true,
                edgeSymbol: ['none', 'arrow'],
                categories: [{
                    name: '查詢實(shí)體',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }, {
                    name: 'instance',
                    itemStyle: {
                        normal: {
                            color: "#4592FF",
                        }
                    }
                }, {
                    name: 'class',
                    itemStyle: {
                        normal: {
                            color: "#C71585",
                        }
                    }
                }],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12,
                        },
                    }
                },
                force: {
                    repulsion: 1000
                },
                edgeSymbolSize: [4, 50],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 10
                        },
                        formatter: "{c}"
                    }
                },
                data: data,
                links: links,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 1.3,
                        curveness: 0,
                        color:"#262626",
                    }
                }
            }
        ]
    };
    // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);

這樣就成功實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖譜可視化：

————————————————
版權(quán)聲明：本文為CSDN博主「游離態(tài)GLZ不可能是金融技術(shù)宅」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37477357/article/details/104857495