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: [{
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 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>