echarts 制作关系图示例

以下是一个简单的 echarts 制作关系图的示例代码：

// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 配置项
var option = {
    title: {
        text: '关系图示例'
    },
    tooltip: {},
    legend: {
        data: ['节点1', '节点2', '节点3']
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: {
            show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            fontSize: 20
        },
        data: [{
            name: '节点1',
            symbol: 'rect',
            x: 300,
            y: 300
        }, {
            name: '节点2',
            symbol: 'rect',
            x: 800,
            y: 300
        }, {
            name: '节点3',
            symbol: 'rect',
            x: 550,
            y: 100
        }],
        // 关系数据
        links: [{
            source: 0,
            target: 1,
            symbolSize: [5, 20],
            label: {
                show: true
            },
            lineStyle: {
                width: 5,
                curveness: 0.2
            }
        }, {
            source: '节点2',
            target: '节点1',
            label: {
                show: true
            },
            lineStyle: {
                curveness: 0.2
            }
        }, {
            source: '节点3',
            target: '节点1',
            label: {
                show: true
            },
            lineStyle: {
                curveness: 0.2
            }
        }, {
            source: '节点2',
            target: '节点3',
            label: {
                show: true
            },
            lineStyle: {
                curveness: 0.2
            }
        }]
    }]
};

// 使用制定的配置项和数据显示图表
myChart.setOption(option);

以上代码中，通过配置项和数据来生成一个关系图。其中 `type: 'graph'` 表示这是一个关系图，`layout: 'force'` 表示使用力引导布局算法。通过设置 `data` 和 `links` 来定义关系图的节点和关联关系，`edgeSymbol` 和 `edgeSymbolSize` 分别设置边的起点和终点的样式和大小，`label` 和 `edgeLabel` 分别设置节点和边的标签。