echarts实现知识图谱，生产项目
function draw(zstpDatas, zstpLinks, zstpCategories) {
var chartDom = document.getElementById("zstpContent");
var myChart = echarts.init(chartDom);
var option;
option = {
// color: ['#dbac00', '#db6e00', '#cf0000','#339a94',"#70c1b3", "#ff9f41", "#ffa54d"],
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
title: {
text: "知识图谱展示",
textStyle: {
// color: 'white',
},
left: "30px",
top: "20px",
},
tooltip: {
show: true,
trigger: 'item',
formatter: function (params) {
console.log(params)
var relVal = params.name
if (params.data.category === "设备") {
return relVal += '<br/>' + "设备名称：" + params.data.value.eqName +
'<br/>' + "父类：" + params.data.value.eqFather +
'<br/>' + "手册编号：" + params.data.value.eqNum
} else if (params.data.category === "部件") {
return null
} else if (params.data.category === "表象") {
return null
} else if (params.data.category === "缺陷") {
return null
} else {
return "该类型还未格式化内容"
}
}
},
legend: {
show: true,
},
xAxis: {
show: false,
},
yAxis: {
show: false,
},
grid: {
top: "80px",
},
series: [
{
type: "graph",
// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
roam: true,
// 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
focusNodeAdjacency: true,
// 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
force: {
// 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
// [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
repulsion: 200,
// [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
edgeLength: [120, 100],
// 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50 edgeLength: [10, 50]
},
// 图的布局。[ default: 'none' ]
layout: "force",
// 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
// 'circular' 采用环形布局;'force' 采用力引导布局.
// 标记的图形
symbol: "circle",
edgeSymbol: ["arrow"],
edgeSymbolSize: [10, 10],
// 关系边的公用线条样式。其中 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
normal: {
lineStyle: {
// 线的颜色[ default: '#aaa' ]
// color: '#fff',
// 线宽[ default: 1 ]
width: 1,
// 线的类型[ default: solid实线 ] 'dashed'虚线 'dotted'
type: "solid",
// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
opacity: 0.5,
// 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
curveness: Math.random() / 3,
},
},
// 关系对象上的标签
label: {
normal: {
// 是否显示标签
show: true,
// 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
position: "inside",
// 文本样式
textStyle: {
fontSize: 16,
// color: 'white'
},
},
},
// 连接两个关系对象的线上的标签
edgeLabel: {
normal: {
show: true,
textStyle: {
// fontSize: 14
},
// 标签内容
formatter: function (param) {
return param.data.category;
},
},
},
data: zstpDatas,
// 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
categories: zstpCategories,
// 节点间的关系数据
links: zstpLinks,
},
],
};
myChart.on('contextmenu', function (params) {
console.log("右键事件",params)
$("#eqName").val(params.data.value.eqName)
$("#eqFather").val(params.data.value.eqFather)
$("#eqNum").val(params.data.value.eqNum)
$('#ModalId').modal('show');
}) // 右键事件
// echarts图表的点击事件，可通过param参数确认点击的对象
// 如果点击了节点2，显示节点2相关的数据
myChart.on("click", function (param) {
if (param.dataType == "node") {
// Node2的 值为1
if (param.data.category === "设备") {
console.log("添加数据")
for (let i = 0; i < 5; i++) {
tmp_id = Math.ceil(Math.random() * 10);
zstpDatas.push({
id: tmp_id + param.data.id + i,
name: param.data.name + i,
draggable: true,
symbolSize: [50, 50],
itemStyle: {
// color: '#00ff00'
},
category: "设备",
value: {
"eqName": param.data.name + i,
"eqFather": param.data.name,
"eqNum": i,
}
});
zstpLinks.push(
{
id: Math.random(),
target: tmp_id + param.data.id + i,
source: param.data.id,
// 关系对象连接线上的标签内容
category: "设备" + i,
lineStyle: {
width: 2,
curveness: Math.random() / 3
}
},
)
}
draw(zstpDatas, zstpLinks, zstpCategories)
} else if (param.data.category === "缺陷") {
console.log("添加数据")
} {
// ("清除数据")
// ();
// ();
// ();
// draw(zstpDatas, zstpLinks, zstpCategories)
// flag = false;
}
} else {
console.log("点击了边")
}
});
myChart.setOption(option);
}