echarts关系图（超级简单：直接复制粘贴官网使用）

//直接复制粘贴到官网实例中，可以调试成自己想要的效果

  var graph = {  //这是数据项目中一般都是获取到的
                nodes: [
                    { "id": "0", "name": "昆山XX设计有限公司", "attributes": { "modularity_class": 0 }},
                    { "id": "1", "name": "上海XX设计有限公司", "attributes": { "modularity_class": 0 }},

                    { "id": "2", "name": "赵某某", "attributes": { "modularity_class": 1 } },

                    { "id": "3", "name": "主要人员", "attributes": { "modularity_class": 2 } },

                    { "id": "4", "name": "苏州XX实业有限公司", "attributes": { "modularity_class": 3 } }
                ],
                links: [
                    { "id": "0", "source": "0", "target": "2" },
                    { "id": "1", "source": "1", "target": "2" },
                    { "id": "2", "source": "2", "target": "3" },
                    { "id": "3", "source": "2", "target": "1" },
                    { "id": "4", "source": "3", "target": "0" },
                ]
            };
            
            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;
           
            var option = {    //这里是option配置
                legend: [{    //图例组件
                    data: categories.map(function (a) {
                        return a.name;
                    }),
                    top: 0,
                    left: (winWidth - 1200) / 2,         //这里是图例组件定位使用的，自定义
                    itemGap: 26,
                    textStyle: {
                        padding: [0, 12]//文字块的内边距。padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
                    },
                    backgroundColor: '#f5f5f5'
                }],
                animationDurationUpdate: 1500,//数据更新动画的时长。
                animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果。
                series: [
                    {
                        type: 'graph',
                        layout: 'force',           //因为节点的位置已经有了就不用在这里使用布局了
                        //circular: { rotateLabel: true },
                        //animation: false,
                        data: graph.nodes,
                        links: graph.links,
                        //categories: categories,   //节点分类的类目
                        roam: true,   //添加缩放和移动
                        draggable:true,//这里设置为false，不然拖拽鼠标和节点有偏移
                        label: {
                            normal: {
                                position: 'bottom',
                                rich: {
                                    bg: {
                                        backgroundColor: '#f5f5f5'
                                    }
                                }
                            }
                        },
                        force: {
                           
                            edgeLength: [10, winWidth /2]
                        }
                    }
                ]
            };
             //  graph.nodes[0].x = 1; //parseInt(Math.random() * screen.width);  //这里是最重要的如果数据中有返回节点x,y位置这里就不用设置，如果没有这里一定要设置node.x和node.y，不然无法定位节点 也实现不了拖拽了；
           // graph.nodes[0].y = 2; //parseInt(Math.random() * screen.height);

          
           
            //graph.nodes[0].category = graph.nodes[0].attributes.modularity_class;
            //graph.nodes[0].label = {
             //   normal: {
             //       show: true
            //    }
            //}
           // graph.nodes[2].x = 100;//Math.floor(Math.random() * winWidth) + 1; //parseInt(Math.random() * screen.width);  //这里是最重要的如果数据中有返回节点x,y位置这里就不用设置，如果没有这里一定要设置node.x和node.y，不然无法定位节点 也实现不了拖拽了；
           // graph.nodes[2].y = 100; //parseInt(Math.random() * screen.height);

        
            
            //graph.nodes[2].category = graph.nodes[2].attributes.modularity_class;
            //graph.nodes[2].label = {
             //   normal: {
             //       show: true
             //   }
            //}
            myChart.setOption(option);

 

//若直接引用到aspx页面，想要加上

//    <script src="Scripts/echarts.min.js"></script>//此处引用您项目具体位置

// <div id="guanxitu" style="width: 80%; height: 80%;"></div>

//var myChart = echarts.init(document.getElementById('guanxitu'));