echarts交叉關系圖二

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();
}