echarts3.0之关系图详解

近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手。话不多说,开整!

echarts3.0官网提供的demo是json文件或者xml文件,我这里以json格式为例说明。echarts3.0关系图由三部分组成,关系类别、关系节点、节点之间连线。下面是代码,代码可以直接粘贴到echarts官网中执行。

myChart.showLoading();
    var webkitDep = {
    "type": "force",
    "categories": [//关系网类别,可以写多组
        {
            "name": "人物关系",//关系网名称
            "keyword": {},
            "base": "人物关系"
        }
    ],
    "nodes": [//展示的节点
        {
            "name": "刘烨",//节点名称
            "value": 3,
            "category": 0//与关系网类别索引对应,此处只有一个关系网所以这里写0
        },
        {
            "name": "霓娜",
            "value": 1,
            "category": 0
        },
        {
            "name": "诺一",
            "value": 1,
            "category": 0
        }
    ],
    "links": [//节点之间连接
        {
            "source": 0,//起始节点,0表示第一个节点
            "target": 1 //目标节点,1表示与索引为1的节点进行连接
        },
        {
            "source": 0,
            "target": 2
        }
    ]
};
    myChart.hideLoading();

    option = {
        legend: {
            data: ['人物关系']//此处的数据必须和关系网类别中name相对应
        },
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
                normal: {
                    show:true,
                    position: 'right'
                }
            },
            draggable: true,
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                edgeLength: 105,//连线的长度
                repulsion: 100  //子节点之间的间距
            },
            edges: webkitDep.links
        }]
    };
    myChart.setOption(option);

最终效果图:

echarts3.0之关系图详解_第1张图片

你可能感兴趣的:(echarts,关系图,详解,echarts)