人物关系图要点
- 数据格式：
- 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!
