人物关系图要点
- 数据格式：
- category 类别分类；
- nodes，同data,核心数据；
- links，节点间的关系数据；
- 如何将二维数据梳理成标准格式，是数据整理的一个难点。
var categories = [{
name: "核心人物"}, {
name: "朋友"}, {
name: "父子"}, {
name: "兄弟"}, {
name: "政敌"}, {
name: "师生"}];
var nodes = [
{
id: 1, category: 0, name: '苏轼', label: '', symbolSize: 50},
{
id: 2, category: 0, name: '苏洵', label: '', symbolSize: 30},
{
id: 3, category: 0, name: '苏辙', label: '', symbolSize: 30},
{
id: 4, category: 0, name: '欧阳修', label: '', symbolSize: 40},
{
id: 5, category: 0, name: '王安石', symbolSize: 40},
{
id: 6, category: 0, name: '曾巩', label: '', symbolSize: 40},
{
id: 7, category: 0, name: '韩愈', label: '', symbolSize: 40},
{
id: 8, category: 0, name: '柳宗元', label: '', symbolSize: 20},
{
id: 9, category: 1, name: '文勋', label: '', symbolSize: 20},
{
id: 10, category: 1, name: '王诜', label: '', symbolSize: 20},
{
id: 11, category: 1, name: '王巩', label: '', symbolSize: 20},
{
id: 12, category: 1, name: '杨世昌', label: '', symbolSize: 20},
{
id: 13, category: 1, name: '道潜', label: '', symbolSize: 20},
{
id: 14, category: 1, name: '蔡鼎臣', label: '', symbolSize: 20},
{
id: 15, category: 1, name: '李之仪', label: '', symbolSize: 20},
{
id: 16, category: 1, name: '刘泾', label: '', symbolSize: 20},
{
id: 17, category: 1, name: '李公麟', label: '', symbolSize: 20},
{
id: 18, category: 1, name: '蒲永升', label: '', symbolSize: 20},
{
id: 19, category: 1, name: '赵令穰', label: '', symbolSize: 20},
{
id: 20, category: 1, name: '刘琮', label: '', symbolSize: 20},
{
id: 21, category: 1, name: '朱服', label: '', symbolSize: 20},
{
id: 22, category: 1, name: '程怀立', label: '', symbolSize: 20},
{
id: 23, category: 1, name: '赵叔盎', label: '', symbolSize: 20},
{
id: 24, category: 1, name: '樊宗师', label: '', symbolSize: 20},
{
id: 25, category: 1, name: '孟郊', label: '', symbolSize: 20},
{
id: 26, category: 1, name: '张籍', label: '', symbolSize: 20},
{
id: 27, category: 1, name: '崔黯', label: '', symbolSize: 20},
{
id: 28, category: 1, name: '李道士', label: '', symbolSize: 20},
{
id: 29, category: 1, name: '时君卿', label: '', symbolSize: 20},
{
id: 30, category: 1, name: '王棣', label: '', symbolSize: 20},
{
id: 31, category: 1, name: '李士云', label: '', symbolSize: 20},
{
id: 32, category: 1, name: '吕惠卿', label: '', symbolSize: 20}
];
var links = [
{
source: '2', target: '1', label: '父子'},
{
source: '3', target: '1', label: '兄弟'},
{
source: '4', target: '1', label: '师生'},
{
source: '5', target: '1', label: '政敌'},
{
source: '9', target: '1', label: '朋友'},
{
source: '10', target: '1', label: '朋友'},
{
source: '11', target: '1', label: '朋友'},
{
source: '12', target: '1', label: '朋友'},
{
source: '13', target: '1', label: '朋友'},
{
source: '14', target: '1', label: '朋友'},
{
source: '15', target: '1', label: '朋友'},
{
source: '16', target: '1', label: '朋友'},
{
source: '17', target: '1', label: '朋友'},
{
source: '18', target: '1', label: '朋友'},
{
source: '19', target: '1', label: '朋友'},
{
source: '20', target: '1', label: '朋友'},
{
source: '21', target: '1', label: '朋友'},
{
source: '22', target: '1', label: '朋友'},
{
source: '23', target: '1', label: '朋友'},
{
source: '23', target: '1', label: '朋友'},
{
source: '1', target: '2', label: '父子'},
{
source: '3', target: '2', label: '父子'},
{
source: '1', target: '3', label: '兄弟'},
{
source: '2', target: '3', label: '父子'},
{
source: '28', target: '3', label: '朋友'},
{
source: '1', target: '4', label: '师生'},
{
source: '5', target: '4', label: '师生'},
{
source: '6', target: '4', label: '师生'},
{
source: '29', target: '5', label: '朋友'},
{
source: '30', target: '5', label: '朋友'},
{
source: '31', target: '5', label: '朋友'},
{
source: '32', target: '5', label: '朋友'},
{
source: '4', target: '6', label: '师生'},
{
source: '24', target: '7', label: '朋友'},
{
source: '25', target: '7', label: '朋友'},
{
source: '26', target: '7', label: '朋友'},
{
source: '27', target: '8', label: '朋友'}
]
Echarts图表构建
var option = {
color: ['#708453', '#1f698f', '#98631d', '#734c3e', '#6b86a2', '#9e2f38', '#a38178', '#a0954b'],
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.data.category != undefined) {
return params.data.label;
} else {
if (params.data.label == undefined) {
return "关系:未知"
} else {
return '关系:' + params.data.label;
}
}
},
textStyle:{
color:'#cabea8'
}
},
legend: [{
x: 'center',
show:false,
textStyle:{
color:'#cabea8'
},
data: categories.map(function (a) {
return a.name;
})
}],
series: [
{
name: '人际关系网络图',
type: 'graph',
layout: 'force',
draggable: true,//指示节点是否可以拖动
focusNodeAdjacency: true, //当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
symbol: 'circle',
force: {
//力引导图基本配置
repulsion: 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
gravity: 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: [80, 100],//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
layoutAnimation: true//因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
},
itemStyle: {
normal: {
label: {
show: true,
textStyle:{
color:'#cabea8'
},
position: 'inside'
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(255,215,0,0.4)',
borderWidth: 1
}
}
},
lineStyle: {
normal: {
show: true,
width: 3,//线条宽度
color: 'source',//决定边的颜色是与起点相同还是与终点相同
curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。
}
},
emphasis: {
lineStyle: {
width: 10
}
},
data: nodes,
links: links,
categories: categories,
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
lockdatav Done!
转载：https://blog.csdn.net/weixin_41290949/article/details/115977432
查看评论