Echarts在线免费图表

 
            option = {
    title: {
        text: '产业链图'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    legend: {
        x: "center",
        show: true,
        data: ["下游", '中游2', '中游1', '上游'] // 此处不显示根节点学生
    },
    series: [

        {
            type: 'graph',
            layout: 'force',
            symbolSize: function(size) {
                return size;
            },
            focusNodeAdjacency: true,
            roam: true,
            categories: [{
                name: '学生',
            }, {
                name: '运维',
            }, {
                name: '下游',
                // itemStyle: { 可配置颜色
                //     normal: {
                //         color: "blue",
                //     }
                // }
            }, {
                name: '中游2',
            }, {
                name: '中游1',
            }, {
                name: '上游',
            }],
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            force: {
                repulsion: 1000
            },
            tooltip: {
                formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
                    if (!node.value) {
                        return node.data.name;
                    } else {
                        return node.data.name + ":" + node.data.showNum;
                    }
                },
            },
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0.3
                }
            },
            data: [{
                    name: '平安银行',
                    draggable: true, // 是否可以拖拽，默认false
                    category: 0, // 这是种类
                    number: 10, // 这是编号 非必须，目的仅为方便编写line
                    value: 60, //图形大小
                    showNum: 25 //节点需要显示的额外内容
                }, {
                    name: '运维1',
                    number: 1,
                    category: 1,
                    draggable: true,
                    value: 40,
                    showNum: 35
                }, {
                    name: '下游',
                    number: 2,
                    category: 2,
                    draggable: true,
                    value: 45,
                    showNum: 35
                },                 {
                    name: '中游2',
                    number: 3,
                    category: 3,
                    draggable: true,
                    value: 45,
                    showNum: 35
                }, {
                    name: '中游1',
                    number: 4,
                    category: 4,
                    draggable: true,
                    value: 45,
                    showNum: 35
                }, {
                    name: '上游',
                    number: 5,
                    category: 5,
                    draggable: true,
                    value: 45,
                    showNum: 35
                }, {
                    name: '企业金融',
                    number: 6,
                    category: 5,
                    draggable: true,
                    value: 60,
                    showNum: 35
                }, {
                    name: '现代管理',
                    number: 7,
                    category: 5,
                    draggable: true,
                    value: 60,
                    showNum: 55
                }, {
                    name: '小企业业务',
                    number: 8,
                    category: 5,
                    draggable: true,
                    value: 75,
                    showNum: 35
                }


            ],
            links: [{
                source: '王小二', // 可以用name 可以用number，但name不能重名
                target: '运维1'
            }, {
                source: 0,
                target: 2,
            }, {
                source: 0,
                target: 3,
            }, {
                source: 0,
                target: 4,
            }, {
                source: 0,
                target: 5,
            }, {
                source: 5,
                target: 6,
            }, {
                source: 6,
                target: 7,
            }, {
                source: 6,
                target: 8,
            }]
        }
    ]
};