传输链路图ECharts Gallery

20:11:45图表已生成
代码
let dataInfo = [{'name': 'trade2', 'category': 0, 'symbolSize': 60, 'value': [0, 0]}, {'name': 'hbzq2', 'category': 1, 'symbolSize': 60, 'value': [500, 0]}, {'name': 'hbzq4', 'category': 1, 'symbolSize': 60, 'value': [600, 0]}, {'name': 'hbzq5', 'category': 1, 'symbolSize': 60, 'value': [700, 0]}, {'name': 'hbzq6', 'category': 1, 'symbolSize': 60, 'value': [800, 0]}, {'name': 'hbzq7', 'category': 1, 'symbolSize': 60, 'value': [500, 80]}, {'name': 'ubiqsh1', 'category': 2, 'symbolSize': 60, 'value': [1000, 0]}, {'name': 'ubiqsh2', 'category': 2, 'symbolSize': 60, 'value': [1100, 0]}, {'name': 'ctjq1', 'category': 3, 'symbolSize': 60, 'value': [1500, 0]}, {'name': 'ctjq2', 'category': 3, 'symbolSize': 60, 'value': [1600, 0]}, {'name': 'gds01', 'category': 4, 'symbolSize': 60, 'value': [0, 200]}, {'name': 'gds02', 'category': 4, 'symbolSize': 60, 'value': [100, 200]}, {'name': 'gds03', 'category': 4, 'symbolSize': 60, 'value': [200, 200]}, {'name': 'gds04', 'category': 4, 'symbolSize': 60, 'value': [300, 200]}, {'name': 'gds05', 'category': 4, 'symbolSize': 60, 'value': [0, 280]}, {'name': 'gds06', 'category': 4, 'symbolSize': 60, 'value': [100, 280]}, {'name': 'gds11', 'category': 4, 'symbolSize': 60, 'value': [200, 280]}, {'name': 'gds12', 'category': 4, 'symbolSize': 60, 'value': [300, 280]}, {'name': 'gds13', 'category': 4, 'symbolSize': 60, 'value': [0, 360]}, {'name': 'gds14', 'category': 4, 'symbolSize': 60, 'value': [100, 360]}, {'name': 'gds15', 'category': 4, 'symbolSize': 60, 'value': [200, 360]}, {'name': 'gds18', 'category': 4, 'symbolSize': 60, 'value': [300, 360]}, {'name': 'gds19', 'category': 4, 'symbolSize': 60, 'value': [0, 440]}, {'name': 'shsx03', 'category': 0, 'symbolSize': 60, 'value': [500, 200]}, {'name': 'shsx04', 'category': 0, 'symbolSize': 60, 'value': [600, 200]}, {'name': 'shsx05', 'category': 0, 'symbolSize': 60, 'value': [700, 200]}, {'name': 'shsx06', 'category': 0, 'symbolSize': 60, 'value': [800, 200]}, {'name': 'shsx07', 'category': 0, 'symbolSize': 60, 'value': [500, 280]}, {'name': 'shsx08', 'category': 0, 'symbolSize': 60, 'value': [600, 280]}, {'name': 'shsx09', 'category': 0, 'symbolSize': 60, 'value': [700, 280]}, {'name': 'shsx11', 'category': 0, 'symbolSize': 60, 'value': [800, 280]}, {'name': 'zxsh', 'category': 1, 'symbolSize': 60, 'value': [1000, 200]}, {'name': 'zxsh2', 'category': 1, 'symbolSize': 60, 'value': [1100, 200]}, {'name': 'hbsz1', 'category': 2, 'symbolSize': 60, 'value': [2000, 0]}, {'name': 'hbsz2', 'category': 2, 'symbolSize': 60, 'value': [2100, 0]}, {'name': 'hbsz3', 'category': 2, 'symbolSize': 60, 'value': [2200, 0]}, {'name': 'hbsz4', 'category': 2, 'symbolSize': 60, 'value': [2300, 0]}, {'name': 'zxzq1', 'category': 3, 'symbolSize': 60, 'value': [2500, 0]}, {'name': 'zxzq2', 'category': 3, 'symbolSize': 60, 'value': [2600, 0]}, {'name': 'ztaisz1', 'category': 4, 'symbolSize': 60, 'value': [3000, 0]}, {'name': 'zxjtsz1', 'category': 0, 'symbolSize': 60, 'value': [3500, 0]}, {'name': 'zxjtsz2', 'category': 0, 'symbolSize': 60, 'value': [3600, 0]}, {'name': 'ztsz1', 'category': 1, 'symbolSize': 60, 'value': [2000, 200]}, {'name': 'ztsz2', 'category': 1, 'symbolSize': 60, 'value': [2100, 200]}, {'name': 'ctsz1', 'category': 2, 'symbolSize': 60, 'value': [2500, 200]}, {'name': 'ctsz2', 'category': 2, 'symbolSize': 60, 'value': [2600, 200]}, {'name': 'sslk1', 'category': 3, 'symbolSize': 60, 'value': [3000, 200]}, {'name': 'sslk2', 'category': 3, 'symbolSize': 60, 'value': [3100, 200]}, {'name': 'sslk21', 'category': 3, 'symbolSize': 60, 'value': [3200, 200]}, {'name': 'sslk22', 'category': 3, 'symbolSize': 60, 'value': [3300, 200]}, {'name': 'sslk3', 'category': 3, 'symbolSize': 60, 'value': [3000, 280]}, {'name': 'sslk4', 'category': 3, 'symbolSize': 60, 'value': [3100, 280]}, {'name': 'sslk5', 'category': 3, 'symbolSize': 60, 'value': [3200, 280]}, {'name': 'sslk6', 'category': 3, 'symbolSize': 60, 'value': [3300, 280]}, {'name': 'zxkbt2', 'category': 4, 'symbolSize': 60, 'value': [3500, 200]}, {'name': 'zxkbts1', 'category': 4, 'symbolSize': 60, 'value': [3600, 200]}, {'name': 'zxkbts2', 'category': 4, 'symbolSize': 60, 'value': [3700, 200]}, {'name': 'zxkbts3', 'category': 4, 'symbolSize': 60, 'value': [3800, 200]}, {'name': 'zxkbts4', 'category': 4, 'symbolSize': 60, 'value': [3500, 280]}, {'name': 'zxkbts5', 'category': 4, 'symbolSize': 60, 'value': [3600, 280]}, {'name': 'nfc01', 'category': 0, 'symbolSize': 60, 'value': [2000, 400]}, {'name': 'nfc02', 'category': 0, 'symbolSize': 60, 'value': [2100, 400]}, {'name': 'nfc03', 'category': 0, 'symbolSize': 60, 'value': [2200, 400]}, {'name': 'nfc04', 'category': 0, 'symbolSize': 60, 'value': [2300, 400]}, {'name': 'nfc05', 'category': 0, 'symbolSize': 60, 'value': [2000, 480]}, {'name': 'nfc06', 'category': 0, 'symbolSize': 60, 'value': [2100, 480]}, {'name': 'pakbt1', 'category': 1, 'symbolSize': 60, 'value': [2500, 400]}, {'name': 'pakbt2', 'category': 1, 'symbolSize': 60, 'value': [2600, 400]}, {'name': 'pakbt3', 'category': 1, 'symbolSize': 60, 'value': [2700, 400]}, {'name': 'pakbt4', 'category': 1, 'symbolSize': 60, 'value': [2800, 400]}, {'name': 'gxzq1', 'category': 2, 'symbolSize': 60, 'value': [3000, 400]}, {'name': 'gxzq2', 'category': 2, 'symbolSize': 60, 'value': [3100, 400]}, {'name': 'gxzq3', 'category': 2, 'symbolSize': 60, 'value': [3200, 400]}, {'name': 'gxzq4', 'category': 2, 'symbolSize': 60, 'value': [3300, 400]}, {'name': 'trade1', 'category': 3, 'symbolSize': 60, 'value': [0, 700]}, {'name': 'ubiq2', 'category': 4, 'symbolSize': 60, 'value': [500, 700]}, {'name': 'ubiq5', 'category': 4, 'symbolSize': 60, 'value': [600, 700]}, {'name': 'ubiqbj1', 'category': 4, 'symbolSize': 60, 'value': [700, 700]}, {'name': 'ubiqbj2', 'category': 4, 'symbolSize': 60, 'value': [800, 700]}, {'name': 'zxzqbj1', 'category': 0, 'symbolSize': 60, 'value': [1000, 700]}, {'name': 'trade3', 'category': 1, 'symbolSize': 60, 'value': [2000, 700]}, {'name': 'htaizq1', 'category': 2, 'symbolSize': 60, 'value': [2500, 700]}, {'name': 'htaizq2', 'category': 2, 'symbolSize': 60, 'value': [2600, 700]}, {'name': 'htaizq3', 'category': 2, 'symbolSize': 60, 'value': [2700, 700]}, {'name': 'htaizq4', 'category': 2, 'symbolSize': 60, 'value': [2800, 700]}, {'name': 'htaizq5', 'category': 2, 'symbolSize': 60, 'value': [2500, 780]}, {'name': 'ubhk1', 'category': 3, 'symbolSize': 60, 'value': [3000, 700]}, {'name': 'ubhk2', 'category': 3, 'symbolSize': 60, 'value': [3100, 700]}, {'name': 'gtaizq1', 'category': 4, 'symbolSize': 60, 'value': [3500, 700]}, {'name': 'zxzj1', 'category': 0, 'symbolSize': 60, 'value': [2000, 1000]}, {'name': 'zxzj2', 'category': 0, 'symbolSize': 60, 'value': [2100, 1000]}, {'name': 'htzj3', 'category': 1, 'symbolSize': 60, 'value': [2500, 1000]}, {'name': 'htzj4', 'category': 1, 'symbolSize': 60, 'value': [2600, 1000]}, {'name': 'htzj5', 'category': 1, 'symbolSize': 60, 'value': [2700, 1000]}, {'name': 'htyd2', 'category': 2, 'symbolSize': 60, 'value': [3000, 1000]}, {'name': 'htyd3', 'category': 2, 'symbolSize': 60, 'value': [3100, 1000]}, {'name': 'htyd4', 'category': 2, 'symbolSize': 60, 'value': [3200, 1000]}, {'name': 'htyd5', 'category': 2, 'symbolSize': 60, 'value': [3300, 1000]}, {'name': 'htyd6', 'category': 2, 'symbolSize': 60, 'value': [3000, 1080]}, {'name': 'jkzj1', 'category': 3, 'symbolSize': 60, 'value': [3500, 1000]}, {'name': 'jkzj2', 'category': 3, 'symbolSize': 60, 'value': [3600, 1000]}, {'name': 'jkzj3', 'category': 3, 'symbolSize': 60, 'value': [3700, 1000]}, {'name': 'dxyd1', 'category': 4, 'symbolSize': 60, 'value': [2000, 1200]}]
let dataLink = [{'source': 'ctsz1', 'value': 'tcp snap', 'target': 'sslk5'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'gds13'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'gds15'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds18'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds15'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds11'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds14'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'gds13'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade1'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade1'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade3'}, {'source': 'gds19', 'value': 'tcp ot', 'target': 'trade3'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade2'}, {'source': 'gds19', 'value': 'tcp snap', 'target': 'trade3'}, {'source': 'gds19', 'value': 'udp snap', 'target': 'ztsz1'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc04'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc05'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc01'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc03'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc02'}, {'source': 'nfc06', 'value': 'udp snap', 'target': 'nfc03'}, {'source': 'nfc06', 'value': 'udp md', 'target': 'nfc03'}, {'source': 'pakbt3', 'value': 'tcp ot', 'target': 'sslk1'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds19'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds18'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds11'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds14'}, {'source': 'gds15', 'value': 'udp md', 'target': 'gds13'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'shsx11'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds19'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds18'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds14'}, {'source': 'gds15', 'value': 'udp snap', 'target': 'gds13'}, {'source': 'htsq1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'hbzq4', 'value': 'udp snap', 'target': 'shsx08'}, {'source': 'hbzq4', 'value': 'tcp snap', 'target': 'shsx06'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz3'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz2'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz1'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbsz4'}, {'source': 'hbzq4', 'value': 'udp md', 'target': 'hbzq2'}, {'source': 'hbzq4', 'value': 'tcp snap', 'target': 'trade1'}, {'source': 'hbzq4', 'value': 'tcp ot', 'target': 'shsx05'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'ctjq1'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'ctjq2'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'hbzq2'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'shsx06', 'value': 'udp md', 'target': 'shsx05'}, {'source': 'ztsz2', 'value': 'tcp ot', 'target': 'nfc06'}, {'source': 'ztsz2', 'value': 'tcp snap', 'target': 'pakbt2'}, {'source': 'ztsz2', 'value': 'tcp snap', 'target': 'nfc06'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk6'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk5'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk1'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk3'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk4'}, {'source': 'sslk21', 'value': 'udp snap', 'target': 'sslk22'}, {'source': 'htdlhk1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'htzj3', 'value': 'udp md', 'target': 'shsx06'}, {'source': 'hbzq5', 'value': 'tcp snap', 'target': 'gds15'}, {'source': 'hbzq5', 'value': 'tcp ot', 'target': 'gds19'}, {'source': 'htzz1', 'value': 'udp md', 'target': 'jkzj1'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'jkzj2'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'jkzj3'}, {'source': 'jkzj1', 'value': 'udp md', 'target': 'htzj5'}, {'source': 'ztsz1', 'value': 'udp md', 'target': 'nfc06'}, {'source': 'ztsz1', 'value': 'tcp snap', 'target': 'sslk21'}, {'source': 'ztsz1', 'value': 'tcp snap', 'target': 'nfc06'}, {'source': 'htaizq5', 'value': 'tcp snap', 'target': 'gds19'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx06'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx05'}, {'source': 'shsx08', 'value': 'udp snap', 'target': 'shsx04'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'hbzq4'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'dxyd1'}, {'source': 'shsx08', 'value': 'udp md', 'target': 'htyd6'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk6'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk21'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk5'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk3'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk4'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'sslk22'}, {'source': 'sslk1', 'value': 'udp md', 'target': 'zxjtsz1'}, {'source': 'sslk1', 'value': 'tcp ot', 'target': 'ctsz1'}, {'source': 'sslk1', 'value': 'tcp ot', 'target': 'gtaizq1'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk6'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk5'}, {'source': 'sslk1', 'value': 'udp ot', 'target': 'sslk3'}, {'source': 'sslk1', 'value': 'tcp snap', 'target': 'zxkbts3'}, {'source': 'sslk1', 'value': 'tcp snap', 'target': 'zxkbts4'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx05'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx11'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx08'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'trade1'}, {'source': 'shsx04', 'value': 'udp md', 'target': 'shsx11'}, {'source': 'zxzqbj1', 'value': 'udp snap', 'target': 'trade1'}, {'source': 'zxzqbj1', 'value': 'tcp snap', 'target': 'trade1'}]
option = {
    title: {
        text: "传输链路图",
        top: "top",
        left: "center"
    },
    itemStyle: {
        normal: {
            color: '#000',
        },
        shadowBlur: 10
    },
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        type: 'graph',
        coordinateSystem: 'cartesian2d',
        legendHoverLink: false,
        hoverAnimation: true,
        nodeScaleRatio: false,
        //建头
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [2, 6],
        edgeLabel: {
            show: false,
            normal: {
                show: true,
                position: 'middle',
                textStyle: {
                    fontSize: 12
                },
                formatter: "{c}"
            }
        },
        focusNodeAdjacency: true,
        roam: true,
        categories: [{
            name: '一级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#A170DD",
                }
            }
        }, {
            name: '二级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#41B1EF",
                }
            }
        }, {
            name: '三级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#E8B842",
                }
            }
        }, {
            name: '四级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#667AED",
                }
            }
        },
         {
            name: '五级关系',
            itemStyle: { //可配置颜色
                normal: {
                    color: "#57A79F",
                }
            }
        }],
        //圆形上面的文字
        label: {
            normal: {
                position: "inside",
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
            }
        },

        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#157eff'
                }, {
                    offset: 1,
                    color: '#35c2ff'
                }]),
            },
            shadowBlur: 10
        },
        // lineStyle: {
        //     normal: {
        //         width: 1,
        //         shadowColor: 'none',
        //         color: '#0250FD'
        //     },
        // },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.1
            }
        },
        data: dataInfo,
        links: dataLink
    }]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
