当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts交叉关系图二

echarts交叉关系图二

2019年05月11日  | 移动技术网IT编程  | 我要评论

echarts关系图表，此图是坐标关系图，此图用的随机坐标，此图可以拖拽，更方便整理关系，

引入echarts.js就可以实现

代码：

var graph={  //这是数据项目中一般都是获取到的
    nodes:[
        {"id":"0","name":"河北xx设计有限公司","attributes":{"modularity_class":0}},
        {"id":"1","name":"石家庄xx设计有限公司","attributes":{"modularity_class":0}},
        {"id":"2","name":"河北xx创业发展有限公司","attributes":{"modularity_class":0}},
        {"id":"3","name":"河北xx置业发展有限公司","attributes":{"modularity_class":0}},
        {"id":"4","name":"石家庄xx传媒有限公司","attributes":{"modularity_class":0}},
        {"id":"5","name":"河北xx实业发展有限公司","attributes":{"modularity_class":0}},

        {"id":"6","name":"赵敏雅","attributes":{"modularity_class":1}},
        {"id":"7","name":"范军","attributes":{"modularity_class":1}},
        {"id":"8","name":"孙海","attributes":{"modularity_class":1}},
        {"id":"9","name":"李博","attributes":{"modularity_class":1}},

        {"id":"10","name":"主要人员","attributes":{"modularity_class":2}},
        {"id":"11","name":"投资人","attributes":{"modularity_class":2}},
        {"id":"12","name":"法定代表人","attributes":{"modularity_class":2}},

        {"id":"13","name":"河北xx实业有限公司","attributes":{"modularity_class":3}}
    ],
    links:[
        {"id":"0","source":"0","target":"6"},
        {"id":"1","source":"1","target":"6"},
        {"id":"2","source":"2","target":"6"},
        {"id":"3","source":"2","target":"7"},
        {"id":"4","source":"3","target":"8"},
        {"id":"5","source":"4","target":"7"},
        {"id":"6","source":"5","target":"7"},
        {"id":"7","source":"6","target":"10"},
        {"id":"8","source":"7","target":"10"},
        {"id":"9","source":"6","target":"11"},
        {"id":"10","source":"7","target":"11"},
        {"id":"11","source":"8","target":"11"},
        {"id":"12","source":"8","target":"12"},
        {"id":"13","source":"9","target":"11"},
        {"id":"14","source":"10","target":"13"},
        {"id":"15","source":"11","target":"13"},
        {"id":"16","source":"12","target":"13"}
    ]
};
var mychart = echarts.init(document.getelementbyid('guanxitu'));
var categories=[
    {
        id:0,
        name: '公司',
        itemstyle:{normal:{color:'#c23531'}},
        symbolsize:[42,42]
    },
    {
        id:1,
        name: '主要成员',
        itemstyle:{normal:{color:'#61a0a8'}},
        symbolsize:[42,42]
    },
    {
        id:2,
        name:'自然人',
        itemstyle:{normal:{color:'#749f83'}},
        symbolsize:[42,42]
    },
    {
        id:3,
        name:'实业公司',
        itemstyle:{normal:{color:'#d48265'}},
        symbolsize:[42,42]
    }
];
var winwidth=document.body.clientwidth;
var winheight=document.body.clientheight;
graph.nodes.foreach(function (node) {
    node.x=parseint(math.random()*800);  //这里是最重要的如果数据中有返回节点x,y位置这里就不用设置，如果没有这里一定要设置node.x和node.y，不然无法定位节点 也实现不了拖拽了；
    node.y=parseint(math.random()*800);
    if(node.attributes.modularity_class != 0){
        node.symbolsize=[42,42];
        node.sizeflag=[42,42];
    }else{
        node.symbolsize=[64,64];
        node.sizeflag=[64,64];
    }
    node.category = node.attributes.modularity_class;
    node.label={
        normal:{
            show:true
        }
    }
});
var option = {    //这里是option配置
    legend: [{    //图例组件
        data: categories.map(function (a) {
            return a.name;
        }),
        top:0,
        left:(winwidth-1200)/2,         //这里是图例组件定位使用的，自定义
        itemgap:26,
        textstyle:{
            padding:[0,12]
        },
        backgroundcolor:'#f5f5f5'
    }],
    animationdurationupdate: 1500,
    animationeasingupdate: 'quinticinout',
    series : [
        {
            type: 'graph',
            layout: 'none',           //因为节点的位置已经有了就不用在这里使用布局了
            circular:{rotatelabel:true},
            animation: false,
            data: graph.nodes,
            links: graph.links,
            categories: categories,   //节点分类的类目
            roam: true,   //添加缩放和移动
            draggable: false,   //注意这里设置为false，不然拖拽鼠标和节点有偏移
            label: {
                normal: {
                    position: 'bottom',
                    rich:{
                        bg:{
                            backgroundcolor: '#f5f5f5'
                        }
                    }
                }
            }
        }
    ]
};
mychart.setoption(option);
initinvisiblegraphic() ;
function initinvisiblegraphic() {
    // add shadow circles (which is not visible) to enable drag.
    mychart.setoption({
        graphic: echarts.util.map(option.series[0].data, function (item, dataindex) {
            //使用图形元素组件在节点上划出一个隐形的图形覆盖住节点
            var tmppos=mychart.converttopixel({'seriesindex': 0},[item.x,item.y]);
            return {
                type: 'circle',
                id:dataindex,
                position: tmppos,
                shape: {
                    cx: 0,
                    cy: 0,
                    r: 20
                },
                // silent:true,
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onpointdragging, dataindex),
                z: 100              //使图层在最高层
            };
        })
    });
    window.addeventlistener('resize', updateposition);
    mychart.on('datazoom', updateposition);
}
mychart.on('graphroam', updateposition);
function updateposition() {    //更新节点定位的函数
    mychart.setoption({
        graphic: echarts.util.map(option.series[0].data, function (item, dataindex) {
            var tmppos=mychart.converttopixel({'seriesindex': 0},[item.x,item.y]);
            return {
                position: tmppos
            };
        })
    });

}
function onpointdragging(dataindex) {      //节点上图层拖拽执行的函数
    var tmppos=mychart.convertfrompixel({'seriesindex': 0},this.position);
    option.series[0].data[dataindex].x = tmppos[0];
    option.series[0].data[dataindex].y = tmppos[1];
    mychart.setoption(option);
    updateposition();
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网