Echarts在线免费图表

 
            option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'none',
            // symbolSize: 50,
            roam: true,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            data: [{
                name: '节点1',
                x: 300,
                y: 300,
                symbolSize: 100,
                symbolOffset: ["-20%",0], 
                //相对于原本位置的偏移。默认情况下，会居中置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。
                //这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
                //可是 如果 这个节点 左边也有箭头指过来，怎么办？？？你把这个symbol 向左偏移左边的就遮住了。。
                symbol: 'rect'
            }, {
                name: '节点2',
                x: 800,
                y: 300,
                symbol: 'roundRect',
                symbolOffset: ["20%",0], 
                //相对于原本位置的偏移。默认情况下，会居中置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。
                //这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
                symbolSize: [100, 80],
            }, {
                name: '节点3',
                x: 550,
                y: 100,
                symbolSize: 50,
                symbolOffset: [0,"-23%"], 
                //相对于原本位置的偏移。默认情况下，会居中置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。
                //这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
                symbol: 'rect'
            }, {
                name: '节点4',
                x: 550,
                y: 500,
                symbolSize: 150,
                symbolOffset: [0,"20%"], 
                //相对于原本位置的偏移。默认情况下，会居中置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。
                //这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。
                symbol: 'rect',
            }],
            // links: [],
            links: [{
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                    normal: {
                        show: true
                    }
                },
                lineStyle: {
                    normal: {
                        width: 5,
                        curveness: 0.2
                    }
                }
            }, {
                source: '节点2',
                target: '节点1',
                label: {
                    normal: {
                        show: true
                    }
                },
                lineStyle: {
                    normal: { curveness: 0.2 }
                }
            }, {
                source: '节点1',
                target: '节点3'
            }, {
                source: '节点2',
                target: '节点3'
            }, {
                source: '节点2',
                target: '节点4'
            }, {
                source: '节点1',
                target: '节点4'
            }],
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        }
    ]
};