Echarts在线免费图表

 
            var seriesData = []
var seriesLinks = []
for (let i = 0; i < 18; i++) {
    seriesData.push({
        name: i + 1,
        draggable: true,
        fixed: true,
        status: 1,
        x: 80 * i,
        y: 0
    });
    if (i < 17) {
        seriesLinks.push({
            target: i,
            source: i + 1,
            status: 1,
            value: '正常',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: 'white'
                    }
                }
            }
        })
    }
}
for (let i = 18; i < 22; i++) {
    seriesData.push({
        name: i + 1,
        draggable: true,
        fixed: true,
        status: 1,
        x: 80 * (i - 17),
        y: -200
    });
    if (i < 21) {
        seriesLinks.push({
            target: i,
            source: i + 1,
            status: 1,
            value: '正常',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: 'white'
                    }
                }
            }
        })
    }
    seriesLinks.push({
        target: 1,
        source: 18,
        status: 1,
        value: '正常',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: '12',
                    color: 'white'
                }
            }
        }
    })
}
for (let i = 22; i < 25; i++) {
    seriesData.push({
        name: i + 1,
        draggable: true,
        fixed: true,
        status: 1,
        x: 80 * (i - 20),
        y: 250
    });
    if (i < 24) {
        seriesLinks.push({
            target: i,
            source: i + 1,
            status: 1,
            value: '正常',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: 'white'
                    }
                }
            }
        })
    }
    seriesLinks.push({
        target: 2,
        source: 22,
        status: 1,
        value: '正常',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: '12',
                    color: 'white'
                }
            }
        }
    })
}
for (let i = 25; i < 32; i++) {
    seriesData.push({
        name: i + 1,
        draggable: true,
        fixed: true,
        status: 1,
        x: 80 * (i - 20),
        y: 150
    });
    if (i < 31) {
        seriesLinks.push({
            target: i,
            source: i + 1,
            status: 1,
            value: '正常',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: 'white'
                    }
                }
            }
        })
    }
    seriesLinks.push({
        target: 5,
        source: 25,
        status: 1,
        value: '正常',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: '12',
                    color: 'white'
                }
            }
        }
    })
}
option = {
    backgroundColor: 'rgb(30,80,151)',
    title: {
        text: '网络拓扑图',
        left: 'center',
        bottom: '0',
        textStyle: {
            fontSize: '12',
            color: 'rgb(255,255,255)'
        }
    },
    tooltip: {
        //提示框  // 触发方式 mousemove, click, none, mousemove|click
        triggerOn: 'mousemove',
        // item 图形触发， axis 坐标轴触发， none 不触发 // triggerOn: 'click',
        trigger: 'item',

        // 自定义数据
        formatter: function (params) {
            const str = `
              <div style="background:#FFF;display: flex;justify-content: space-between; gap:10px">
                <div>
                  <p>编号：</p>
                  <p>名称：</p>
                  <p>状态：</p>
                </div>
                <div style="text-align: right">
                  <p>${params.name || '-'}</p>
                  <p>测试设备</p>
                  <p style="color:${params.data.status === 1 ? 'green' : 'red'}">${params.data.status === 1 ? '正常' : '危险'
                }</p>
                </div>
              </div>`;
            return str;
        }
    },
    legend: {
        show: true,
        data: [
        ],
        textStyle: {
            fontSize: '12',
            color: 'rgb(255,255,255)'
        }
    },
    animationDurationUpdate: 100,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            name: '网络拓扑图',
            type: 'graph',
            layout: 'force',
            symbolSize: 12,
            color: '#bfc',
            // edgeSymbol: ['arrow'],
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: "{c}"
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'bottom',
                    textStyle: {
                        fontSize: '12',
                        color: 'white'
                    }
                }
            },
            roam: true,
            focusNodeAdjacency: true,
            data: this.seriesData,
            force: {
                edgeLength: 50,
                repulsion: 250,
                gravity: 0.1
            },
            links: this.seriesLinks,
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    color: 'green',
                    width: 3,
                    curveness: 0
                }
            },
        }
    ]
}