大佬要求前端页面用echarts做一个关系图,然后摸索了一下,搞清楚了各个属性的具体含义及用法,才把图给写出来,记录一下我用到过的各个属性
this.myChart.setOption(
{
//表的显示名称
title: {
text: '数据来源去向查看'
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',//表的类型
layout: 'none',
//节点之间箭头的形状,左边参数是指线左边的形状,
//none是指不做处理,arrow是指线的右边为箭头
edgeSymbol: ['none', 'arrow'],
//节点两端的大小
edgeSymbolSize: [20, 20],
// progressiveThreshold: 700,
//节点的数据及节点的属性设置
data: json.nodes.map(function(node) {
return {
//节点的横纵坐标
x: node.x,
y: node.y,
id: node.id,
//节点显示的名字
name: node.label,
//节点的大小
symbolSize: node.size,
//节点的熟悉。如颜色,是否显示节点,透明度等等
itemStyle: {
color: node.color,
show: true,
opacity: node.opacity
},
//节点内文本的属性
label: {
show: node.show
}
};
}),
//两个节点之间的连线
edges: json.edges.map(function(edge) {
return {
//线的起始和重点
source: edge.sourceID,
target: edge.targetID,
//线的大小
size: 100,
//连线之间显示的文字
label: {
show: edge.isShow
},
//连线的属性,如透明度,颜色等等
lineStyle: {
opacity: edge.opacity
}
};
}),
emphasis: {
label: {
position: 'top',
show: true
}
},
roam: true,
focusNodeAdjacency: true,
lineStyle: {
width: 1.0,
curveness: 0,
opacity: 0.7
}
}
]
},
true
);