漏刻有时数据可视化Echarts组件开发(10):唐宋八大家人物关系图

在这里插入图片描述

人物关系图要点

  1. 数据格式:
  • category 类别分类;
  • nodes,同data,核心数据;
  • links,节点间的关系数据;
  1. 如何将二维数据梳理成标准格式,是数据整理的一个难点。
 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!

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页