网络拓扑图echarts graph配置项内容和展示

网络拓扑图

      option = {
    tooltip: {},
    graphic: [{
        type: 'group',
        left: 0,
        top: 0,
        children: [
            // 生产区
            {
                type: 'rect',
                z: 1,
                left: 0,
                top: 0,
                shape: {
                    width: 400,
                    height: 400
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 10,
                top: 10,
                style: {
                    fill: '#8EC9EB',
                    text: "生产区",
                    font: '14px Microsoft YaHei'
                }
            },
            // 内网核心
            {
                type: 'rect',
                z: 1,
                left: 400,
                top: 0,
                shape: {
                    width: 400,
                    height: 600
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 410,
                top: 10,
                style: {
                    fill: '#8EC9EB',
                    text: "内网核心",
                    font: '14px Microsoft YaHei'
                }
            },
            // 灾备中心
            {
                type: 'rect',
                z: 1,
                left: 800,
                top: 0,
                shape: {
                    width: 400,
                    height: 200
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 810,
                top: 10,
                style: {
                    fill: '#8EC9EB',
                    text: "灾备中心",
                    font: '14px Microsoft YaHei'
                }
            },
            // 办公区
            {
                type: 'rect',
                z: 1,
                left: 0,
                top: 400,
                shape: {
                    width: 400,
                    height: 400
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 10,
                top: 410,
                style: {
                    fill: '#8EC9EB',
                    text: "办公区",
                    font: '14px Microsoft YaHei'
                }
            },
            // 隔离区
            {
                type: 'rect',
                z: 1,
                left: 400,
                top: 600,
                shape: {
                    width: 400,
                    height: 200
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 410,
                top: 610,
                style: {
                    fill: '#8EC9EB',
                    text: "隔离区",
                    font: '14px Microsoft YaHei'
                }
            },
            // 网管区
            {
                type: 'rect',
                z: 1,
                left: 800,
                top: 200,
                shape: {
                    width: 400,
                    height: 600
                },
                style: {
                    fill: '#fff',
                    stroke: '#8EC9EB',
                    lineWidth: 1,
                    shadowBlur: 0,
             
                }
            },
            {
                type: 'text',
                z: 2,
                left: 810,
                top: 610,
                style: {
                    fill: '#8EC9EB',
                    text: "网管区",
                    font: '14px Microsoft YaHei'
                }
            }
            
        ]

    }],
    // xAxis: {
    //     show: false,
    //     // type : 'category',
    //     // boundaryGap : false,
    //     // data : axisData
    //     type: 'value'
    // },
    // yAxis: {
    //     show: false,
    //     type: 'value'
    // },
    // legend: [{
    //     data: ['正常', '异常']
    // }],
    series: [{
        type: 'graph',
        // coordinateSystem: 'cartesian2d',
        layout: 'none',
        // symbol: 'image://img/img1.png',
        roam: 'move',
        left: 50,
        top: 50,
        width: 1600,
        height: 810,
        // width: '100%',
        // height: '100%',
        // coordinateSystem: 'cartesian2d',
        edgeLabel: {
            normal: {
                show: false
            },
            emphasis: {
                textStyle: {
                    fontSize: 20 //边节点显示的字体大小
                }
            }
        },
        lineStyle: {
            normal: {
                show: true,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'blue' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },

                // curveness: 0.2

            },
            emphasis: {
                color: 'red',
                width: 3,
                type: 'dashed', //虚线

            }
        },
        // 节点信息
        data: [{
            name: '交换机1',
            x: 0,
            y: 0,
           // symbol: 'image://img/img1.png',
            symbol: 'circle',
            symbolSize: 50,
            label: {
                normal: {
                    show: true,
                    color: '#000',
                    offset: [10, 20]
                }
            }
            // symbolOffset: [0, 0]
        }, {
            name: '交换机2',
            x: 40,
            y: 80,
           // symbol: 'image://img/img2.png',
           symbol: 'circle',
            symbolSize: 50
            // symbolOffset: [0, 0]
        }, {
            name: '交换机3',
            x: 100,
            y: 100,
           // symbol: 'image://img/img2.png',
           symbol: 'circle',
            symbolSize: 50
            // symbolOffset: [0, 0]
        }, {
            name: '交换机4',
            x: 50,
            y: 50,
           // symbol: 'image://img/img2.png',
           symbol: 'circle',
            symbolSize: 50
            // symbolOffset: [0, 0]
        }],
        links: [{
            source: '交换机1',
            target: '交换机2',
            name: '连接1'
        }, {
            source: '交换机2',
            target: '交换机3',
            name: '连接2'
        }, {
            source: '交换机3',
            target: '交换机4',
            name: '连接3'
        }]

    }]
};