SOURCE

console 命令行工具 X clear

                    
>
console
var c = ["源头", "非常坚定", "未必坚定", "潜在", "卖方"];
var n = ['朱0', 'F&D1', '王s1', '蒋1', 'ZKB1', 'JJ1', '孟1', '孟X1', '景林2', '任XD2', '李J2', '代YF2', '刘P2', '赖ZL2', '田YL2', '郭NX2', '李b2', '新华3', '彤源3', '史FK4'];
var l = ['朱=F&D=', '朱=王s=', '朱=蒋=', 'F&D=ZKB=', 'F&D=JJ=', 'F&D=孟=', 'F&D=史FK=', '孟=孟X=', '孟=新华=', '史FK=代YF=', 'F&D=ZKB=', 'ZKB=景林=', 'ZKB=任XD=', 'ZKB=李J=', 'ZKB=刘P=', 'ZKB=赖ZL=', 'ZKB=田YL=', 'ZKB=郭NX=', 'ZKB=李b=', 'ZKB=彤源='];
var myChart;
var positions;

function DrawIt(nodes, links) {
    var option = {
        title: {
            text: '知识图谱',
            subtext: ' ',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {
            show: false
        },
        legend: [{
            // selectedMode: 'single',
            data: c
        }],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                name: '',
                type: 'graph',
                layout: 'force',
                force: {
                    gravity: 0.1,
                    repulsion: [50, 100],
                    edgeLength: [10, 50]
                },
                roam: true,
                focusNodeAdjacency: true,
                draggable: true,
                edgeSymbol: ['none', 'arrow'],
                edgeSymbolSize: 5,
                data: nodes,
                links: links,
                categories: c.map(function (itm) {
                    return { 'name': itm }
                }),
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                },
                label: {
                    show: true,
                    fontSize: 10,
                    position: 'right'
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.2,
                },
                edgeLabel: {
                    formatter: '{c}',
                    fontSize: 10,
                },
                emphasis: {
                    lineStyle: {
                        width: 3
                    },
                    edgeLabel: {
                        opacity: 1
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
    positions = myChart._chartsViews[0]._symbolDraw._data._itemLayouts;
}

jQuery(function () {
    myChart = echarts.init(document.getElementById('mychat'));

    $("#submit").click(function () {
        var keyword = $("#keyword").val();
        // var l_f = links.filter(function (itm) {
        //     return itm['source'].indexOf(keyword) > -1 || itm['target'].indexOf(keyword) > -1;
        // });
        // var l_f_n = [];
        // for (var i of l_f) {
        //     if (l_f_n.indexOf(i['source']) == -1) {
        //         l_f_n.push(i['source']);
        //     }
        //     if (l_f_n.indexOf(i['target']) == -1) {
        //         l_f_n.push(i['target']);
        //     }
        // }
        // var n_f = nodes.filter(function (itm) {
        //     return l_f_n.indexOf(itm['name']) > -1;
        // });
        // DrawIt(n_f, l_f);

        var options = myChart.getOption();
        var nodesOption = options.series[0].data;
        var idx;
        for (let n in nodesOption) {
            if (nodesOption[n].name == keyword) {
                idx = n;
            }
        }

        options.series[0]['zoom'] = 3;
        options.series[0]['center'] = positions[idx];
        myChart.setOption(options);

        myChart.dispatchAction({
            type: 'focusNodeAdjacency',
            seriesIndex: 0,
            dataIndex: idx
        });

    });

    var nodes = n.map(function (itm) {
        var size = 20;
        var ctg = parseInt(itm.slice(-1));

        return {
            name: itm.slice(0, -1),
            value: "",
            x: null,
            y: null,
            symbolSize: size,
            category: ctg,
        }
    });

    var links = l.map(function (itm) {
        value = itm.split('=')[2];
        return {
            source: itm.split('=')[1],
            target: itm.split('=')[0],
            value: value,
            label: {
                show: value != ""
            }
        }
    });

    DrawIt(nodes, links);
});
<input type="text" id="keyword" />
<input type="button" id="submit" value="提交" />
<div id="mychat" style="width: 1000px;height:800px;"></div>

本项目引用的自定义外部资源