Echarts在线免费图表

 
            var data = [
            {
                "root": "service1",
                "clients": [
                    "service11",
                    "service12"
                ]
            },
            {
                "root": "service2",
                "clients": [
                    "service21",
                    "service22"
                ],
                "servers": [
                    "service12"
                ]
            }
        ];


var option = {
    series: [{
        type: 'graph',
        legendHoverLink: true,
        layout: 'force',
        focusNodeAdjacency: true,
        force : { //力引导图基本配置
                        //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                        repulsion : [100, 600],//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                        gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        edgeLength :[30, 80],//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                        layoutAnimation : true
                    //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                        
                    },
        roam : 'move',//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        nodeScaleRatio : 0.2 ,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
        draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
        cursor : 'pointer',
        itemStyle: {
            normal: {
                color: '#ccc',
                borderColor: '#1af'
            }
        },
        lineStyle: {
            normal: {
                color: '#1af',
                opacity: 0.9,
                width: 2,
                curveness: 0.2
            }
        },
        data : [ {
                        id : 0,
                        category : 0,
                        name : '101.133.8.88',
                        // symbol : 'roundRect',
                        symbol : 'roundRect',
                        value : 20,
                        symbolSize : 150
                    }, 
                    {
                        id : 1,
                        category : 1,
                        name : '192.168.8.88',
                        // symbol : 'rect',
                        symbol : 'roundRect',
                        value : 450,
                        symbolSize : 100
                    },{
                        id : 2,
                        category : 1,
                        name : '192.168.8.88',
                        // symbol : 'rect',
                        symbol : 'roundRect',
                        value : 450,
                        symbolSize : 100
                    }],
        links : [ //edges是其别名代表节点间的关系数据。
                    {
                        source : 1,
                        target : 0
                    }, {
                        source : 2,
                        target : 0
                    }]
    }]
};
myChart.setOption(option);