力导向图 刷新数据时晃动严重echarts graph配置项内容和展示
加载时 ，修改数据 以及刷新时 节点晃动严重 影响观察， 希望 加载 刷新时 是图形能快速稳定 ，修改数据时 例如修改节点 line的样式时 不要出现波动 颜色直接变化， 如果force 图无法满足需求是否有其他办法
配置项如下
var data = [ {
"symbolSize" : 16,
"name" : "1",
"label" : "SDP1"
}, {
"symbolSize" : 16,
"name" : "2",
"label" : "SDP2"
}, {
"symbolSize" : 16,
"name" : "3",
"label" : "FDP1"
}, {
"symbolSize" : 16,
"name" : "4",
"label" : "FDP2"
}, {
"symbolSize" : 16,
"name" : "5",
"label" : "BSDP1"
}, {
"symbolSize" : 16,
"name" : "6",
"label" : "BSDP2"
}, {
"symbolSize" : 16,
"name" : "7",
"label" : "BFDP"
}, {
"symbolSize" : 16,
"name" : "15",
"label" : "DRF1"
}, {
"symbolSize" : 16,
"name" : "16",
"label" : "DRF2"
}, {
"symbolSize" : 16,
"name" : "17",
"label" : "DCP1"
}, {
"symbolSize" : 16,
"name" : "18",
"label" : "DCP2"
}, {
"symbolSize" : 16,
"name" : "19",
"label" : "LGP"
}, {
"symbolSize" : 16,
"name" : "20",
"label" : "INSDBMS"
}, {
"symbolSize" : 16,
"name" : "21",
"label" : "DOP"
}, {
"symbolSize" : 16,
"name" : "23",
"label" : "MRFP1"
}, {
"symbolSize" : 16,
"name" : "24",
"label" : "MRFP2"
}, {
"symbolSize" : 16,
"name" : "25",
"label" : "MRFP3"
}, {
"symbolSize" : 16,
"name" : "26",
"label" : "MRFP4"
}, {
"symbolSize" : 16,
"name" : "29",
"label" : "BRFP1"
}, {
"symbolSize" : 16,
"name" : "30",
"label" : "BRFP2"
}, {
"symbolSize" : 16,
"name" : "31",
"label" : "BRFP3"
}, {
"symbolSize" : 16,
"name" : "32",
"label" : "BRFP4"
}, {
"symbolSize" : 16,
"name" : "35",
"label" : "MSFP1"
}, {
"symbolSize" : 16,
"name" : "36",
"label" : "MSFP2"
}, {
"symbolSize" : 16,
"name" : "37",
"label" : "BSFP1"
}, {
"symbolSize" : 16,
"name" : "38",
"label" : "BSFP2"
}, {
"symbolSize" : 16,
"name" : "41",
"label" : "SMP1"
}, {
"symbolSize" : 16,
"name" : "42",
"label" : "TSP1"
}, {
"symbolSize" : 16,
"name" : "43",
"label" : "SMPFDOP"
}, {
"symbolSize" : 16,
"name" : "45",
"label" : "AMAN1"
}, {
"symbolSize" : 16,
"name" : "46",
"label" : "AMAN2"
}, {
"symbolSize" : 16,
"name" : "53",
"label" : "ACSP01EC"
}, {
"symbolSize" : 16,
"name" : "54",
"label" : "ACSP01PLC"
}, {
"symbolSize" : 16,
"name" : "59",
"label" : "AC01EC"
}, {
"symbolSize" : 16,
"name" : "60",
"label" : "AC01PLC"
}, {
"symbolSize" : 16,
"name" : "61",
"label" : "AC02EC"
}, {
"symbolSize" : 16,
"name" : "62",
"label" : "AC02PLC"
}, {
"symbolSize" : 16,
"name" : "63",
"label" : "AC03EC"
}, {
"symbolSize" : 16,
"name" : "64",
"label" : "AC03PLC"
}, {
"symbolSize" : 16,
"name" : "65",
"label" : "AC04EC"
}, {
"symbolSize" : 16,
"name" : "66",
"label" : "AC04PLC"
}, {
"symbolSize" : 16,
"name" : "67",
"label" : "AC05EC"
}, {
"symbolSize" : 16,
"name" : "68",
"label" : "AC05PLC"
}, {
"symbolSize" : 16,
"name" : "69",
"label" : "AC06EC"
}, {
"symbolSize" : 16,
"name" : "70",
"label" : "AC06PLC"
}, {
"symbolSize" : 16,
"name" : "97",
"label" : "FDOP1"
}, {
"symbolSize" : 16,
"name" : "98",
"label" : "FDOP2"
}, {
"symbolSize" : 16,
"name" : "99",
"label" : "FDOP3"
}, {
"symbolSize" : 16,
"name" : "100",
"label" : "FDOP4"
}, {
"symbolSize" : 16,
"name" : "101",
"label" : "FDOP5"
}, {
"symbolSize" : 16,
"name" : "103",
"label" : "ACFDO1"
}, {
"symbolSize" : 16,
"name" : "107",
"label" : "ACRES1EC"
}, {
"symbolSize" : 16,
"name" : "108",
"label" : "ACRES1PLC"
}, {
"symbolSize" : 16,
"name" : "111",
"label" : "ACOMA01EC"
}, {
"symbolSize" : 16,
"name" : "112",
"label" : "ACOMA01PLC"
}, {
"symbolSize" : 16,
"name" : "119",
"label" : "ACMCC01EC"
}, {
"symbolSize" : 16,
"name" : "120",
"label" : "ACMCC01PLC"
}, {
"symbolSize" : 16,
"name" : "123",
"label" : "ACSMP1"
}, {
"symbolSize" : 16,
"name" : "124",
"label" : "ACSMP2"
}, {
"symbolSize" : 16,
"name" : "125",
"label" : "ACSMP3"
}, {
"symbolSize" : 16,
"name" : "131",
"label" : "APSP01EC"
}, {
"symbolSize" : 16,
"name" : "132",
"label" : "APSP01PLC"
}, {
"symbolSize" : 16,
"name" : "135",
"label" : "AP01EC"
}, {
"symbolSize" : 16,
"name" : "136",
"label" : "AP01PLC"
}, {
"symbolSize" : 16,
"name" : "137",
"label" : "AP02EC"
}, {
"symbolSize" : 16,
"name" : "138",
"label" : "AP02PLC"
}, {
"symbolSize" : 16,
"name" : "139",
"label" : "AP03EC"
}, {
"symbolSize" : 16,
"name" : "140",
"label" : "AP03PLC"
}, {
"symbolSize" : 16,
"name" : "141",
"label" : "AP04EC"
}, {
"symbolSize" : 16,
"name" : "142",
"label" : "AP04PLC"
}, {
"symbolSize" : 16,
"name" : "164",
"label" : "APMCC01EC"
}, {
"symbolSize" : 16,
"name" : "165",
"label" : "APMCC01PLC"
}, {
"symbolSize" : 16,
"name" : "170",
"label" : "APOMA01EC"
}, {
"symbolSize" : 16,
"name" : "171",
"label" : "APOMA01PLC"
}, {
"symbolSize" : 16,
"name" : "181",
"label" : "TSDP1"
}, {
"symbolSize" : 16,
"name" : "182",
"label" : "TSDP2"
}, {
"symbolSize" : 16,
"name" : "185",
"label" : "TDRF1"
}, {
"symbolSize" : 16,
"name" : "186",
"label" : "TDRF2"
}, {
"symbolSize" : 16,
"name" : "187",
"label" : "TSFP1"
}, {
"symbolSize" : 16,
"name" : "188",
"label" : "TSFP2"
}, {
"symbolSize" : 16,
"name" : "191",
"label" : "TWSP01EC"
}, {
"symbolSize" : 16,
"name" : "192",
"label" : "TWSP01PLC"
}, {
"symbolSize" : 16,
"name" : "195",
"label" : "TW01EC"
}, {
"symbolSize" : 16,
"name" : "196",
"label" : "TW01PLC"
}, {
"symbolSize" : 16,
"name" : "197",
"label" : "TW02EC"
}, {
"symbolSize" : 16,
"name" : "198",
"label" : "TW02PLC"
}, {
"symbolSize" : 16,
"name" : "199",
"label" : "TW03EC"
}, {
"symbolSize" : 16,
"name" : "200",
"label" : "TW03PLC"
}, {
"symbolSize" : 16,
"name" : "201",
"label" : "STW01EC"
}, {
"symbolSize" : 16,
"name" : "202",
"label" : "STW01PLC"
}, {
"symbolSize" : 16,
"name" : "203",
"label" : "STW02EC"
}, {
"symbolSize" : 16,
"name" : "204",
"label" : "STW02PLC"
}, {
"symbolSize" : 16,
"name" : "205",
"label" : "GND1"
}, {
"symbolSize" : 16,
"name" : "209",
"label" : "DLV1"
}, {
"symbolSize" : 16,
"name" : "213",
"label" : "TWMCC01EC"
}, {
"symbolSize" : 16,
"name" : "215",
"label" : "TWSMP1"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s6",
"label" : "CSWIA"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s7",
"label" : "CSWIB"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s8",
"label" : "CSWIC"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s5",
"label" : "GPSM"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s3",
"label" : "INSWI1"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s4",
"label" : "INSWI2"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s2",
"label" : "ROUTE1"
}, {
"draggable" : true,
"symbolSize" : 30,
"name" : "s1",
"label" : "ROUTE2"
} ];
var links = [ {
"source" : "1",
"target" : "s1"
}, {
"source" : "1",
"target" : "s3"
}, {
"source" : "1",
"target" : "s5"
}, {
"source" : "2",
"target" : "s3"
}, {
"source" : "2",
"target" : "s4"
}, {
"source" : "2",
"target" : "s6"
}, {
"source" : "3",
"target" : "s2"
}, {
"source" : "3",
"target" : "s3"
}, {
"source" : "3",
"target" : "s4"
}, {
"source" : "4",
"target" : "s3"
}, {
"source" : "4",
"target" : "s1"
}, {
"source" : "4",
"target" : "s4"
}, {
"source" : "5",
"target" : "s2"
}, {
"source" : "5",
"target" : "s3"
}, {
"source" : "5",
"target" : "s6"
}, {
"source" : "6",
"target" : "s5"
}, {
"source" : "6",
"target" : "s6"
}, {
"source" : "6",
"target" : "s7"
}, {
"source" : "7",
"target" : "s6"
}, {
"source" : "7",
"target" : "s7"
}, {
"source" : "7",
"target" : "s8"
}, {
"source" : "15",
"target" : "s1"
}, {
"source" : "15",
"target" : "s2"
}, {
"source" : "15",
"target" : "s3"
}, {
"source" : "16",
"target" : "s1"
}, {
"source" : "16",
"target" : "s2"
}, {
"source" : "16",
"target" : "s3"
}, {
"source" : "17",
"target" : "s1"
}, {
"source" : "17",
"target" : "s2"
}, {
"source" : "17",
"target" : "s3"
}, {
"source" : "18",
"target" : "s1"
}, {
"source" : "18",
"target" : "s2"
}, {
"source" : "18",
"target" : "s3"
}, {
"source" : "19",
"target" : "s1"
}, {
"source" : "19",
"target" : "s2"
}, {
"source" : "19",
"target" : "s3"
}, {
"source" : "20",
"target" : "s1"
}, {
"source" : "20",
"target" : "s2"
}, {
"source" : "20",
"target" : "s3"
}, {
"source" : "21",
"target" : "s1"
}, {
"source" : "21",
"target" : "s2"
}, {
"source" : "21",
"target" : "s3"
}, {
"source" : "23",
"target" : "s1"
}, {
"source" : "23",
"target" : "s2"
}, {
"source" : "23",
"target" : "s3"
}, {
"source" : "24",
"target" : "s1"
}, {
"source" : "24",
"target" : "s2"
}, {
"source" : "24",
"target" : "s3"
}, {
"source" : "25",
"target" : "s1"
}, {
"source" : "25",
"target" : "s2"
}, {
"source" : "25",
"target" : "s3"
}, {
"source" : "26",
"target" : "s1"
}, {
"source" : "26",
"target" : "s2"
}, {
"source" : "26",
"target" : "s3"
}, {
"source" : "29",
"target" : "s1"
}, {
"source" : "29",
"target" : "s2"
}, {
"source" : "29",
"target" : "s3"
}, {
"source" : "30",
"target" : "s1"
}, {
"source" : "30",
"target" : "s2"
}, {
"source" : "30",
"target" : "s3"
}, {
"source" : "31",
"target" : "s1"
}, {
"source" : "31",
"target" : "s2"
}, {
"source" : "31",
"target" : "s3"
}, {
"source" : "32",
"target" : "s1"
}, {
"source" : "32",
"target" : "s2"
}, {
"source" : "32",
"target" : "s3"
}, {
"source" : "35",
"target" : "s1"
}, {
"source" : "35",
"target" : "s2"
}, {
"source" : "35",
"target" : "s3"
}, {
"source" : "36",
"target" : "s1"
}, {
"source" : "36",
"target" : "s2"
}, {
"source" : "36",
"target" : "s3"
}, {
"source" : "37",
"target" : "s1"
}, {
"source" : "37",
"target" : "s2"
}, {
"source" : "37",
"target" : "s3"
}, {
"source" : "38",
"target" : "s2"
}, {
"source" : "38",
"target" : "s3"
}, {
"source" : "38",
"target" : "s4"
}, {
"source" : "41",
"target" : "s2"
}, {
"source" : "41",
"target" : "s3"
}, {
"source" : "41",
"target" : "s4"
}, {
"source" : "42",
"target" : "s2"
}, {
"source" : "42",
"target" : "s3"
}, {
"source" : "42",
"target" : "s4"
}, {
"source" : "43",
"target" : "s2"
}, {
"source" : "43",
"target" : "s3"
}, {
"source" : "43",
"target" : "s4"
}, {
"source" : "45",
"target" : "s2"
}, {
"source" : "45",
"target" : "s3"
}, {
"source" : "45",
"target" : "s4"
}, {
"source" : "46",
"target" : "s2"
}, {
"source" : "46",
"target" : "s3"
}, {
"source" : "46",
"target" : "s4"
}, {
"source" : "53",
"target" : "s2"
}, {
"source" : "53",
"target" : "s3"
}, {
"source" : "53",
"target" : "s4"
}, {
"source" : "54",
"target" : "s2"
}, {
"source" : "54",
"target" : "s3"
}, {
"source" : "54",
"target" : "s4"
}, {
"source" : "59",
"target" : "s2"
}, {
"source" : "59",
"target" : "s3"
}, {
"source" : "59",
"target" : "s4"
}, {
"source" : "60",
"target" : "s2"
}, {
"source" : "60",
"target" : "s3"
}, {
"source" : "60",
"target" : "s4"
}, {
"source" : "61",
"target" : "s2"
}, {
"source" : "61",
"target" : "s3"
}, {
"source" : "61",
"target" : "s4"
}, {
"source" : "62",
"target" : "s2"
}, {
"source" : "62",
"target" : "s3"
}, {
"source" : "62",
"target" : "s4"
}, {
"source" : "63",
"target" : "s2"
}, {
"source" : "63",
"target" : "s3"
}, {
"source" : "63",
"target" : "s4"
}, {
"source" : "64",
"target" : "s2"
}, {
"source" : "64",
"target" : "s3"
}, {
"source" : "64",
"target" : "s4"
}, {
"source" : "65",
"target" : "s2"
}, {
"source" : "65",
"target" : "s3"
}, {
"source" : "65",
"target" : "s4"
}, {
"source" : "66",
"target" : "s2"
}, {
"source" : "66",
"target" : "s3"
}, {
"source" : "66",
"target" : "s4"
}, {
"source" : "67",
"target" : "s2"
}, {
"source" : "67",
"target" : "s3"
}, {
"source" : "67",
"target" : "s4"
}, {
"source" : "68",
"target" : "s2"
}, {
"source" : "68",
"target" : "s3"
}, {
"source" : "68",
"target" : "s4"
}, {
"source" : "69",
"target" : "s3"
}, {
"source" : "69",
"target" : "s4"
}, {
"source" : "69",
"target" : "s6"
}, {
"source" : "70",
"target" : "s3"
}, {
"source" : "70",
"target" : "s4"
}, {
"source" : "70",
"target" : "s6"
}, {
"source" : "97",
"target" : "s3"
}, {
"source" : "97",
"target" : "s4"
}, {
"source" : "97",
"target" : "s6"
}, {
"source" : "98",
"target" : "s3"
}, {
"source" : "98",
"target" : "s4"
}, {
"source" : "98",
"target" : "s6"
}, {
"source" : "99",
"target" : "s3"
}, {
"source" : "99",
"target" : "s4"
}, {
"source" : "99",
"target" : "s6"
}, {
"source" : "100",
"target" : "s3"
}, {
"source" : "100",
"target" : "s4"
}, {
"source" : "100",
"target" : "s6"
}, {
"source" : "101",
"target" : "s3"
}, {
"source" : "101",
"target" : "s4"
}, {
"source" : "101",
"target" : "s6"
}, {
"source" : "103",
"target" : "s3"
}, {
"source" : "103",
"target" : "s4"
}, {
"source" : "103",
"target" : "s6"
}, {
"source" : "107",
"target" : "s3"
}, {
"source" : "107",
"target" : "s4"
}, {
"source" : "107",
"target" : "s6"
}, {
"source" : "108",
"target" : "s3"
}, {
"source" : "108",
"target" : "s4"
}, {
"source" : "108",
"target" : "s6"
}, {
"source" : "111",
"target" : "s3"
}, {
"source" : "111",
"target" : "s4"
}, {
"source" : "111",
"target" : "s6"
}, {
"source" : "112",
"target" : "s3"
}, {
"source" : "112",
"target" : "s4"
}, {
"source" : "112",
"target" : "s6"
}, {
"source" : "119",
"target" : "s3"
}, {
"source" : "119",
"target" : "s4"
}, {
"source" : "119",
"target" : "s6"
}, {
"source" : "120",
"target" : "s3"
}, {
"source" : "120",
"target" : "s4"
}, {
"source" : "120",
"target" : "s6"
}, {
"source" : "123",
"target" : "s3"
}, {
"source" : "123",
"target" : "s4"
}, {
"source" : "123",
"target" : "s6"
}, {
"source" : "124",
"target" : "s3"
}, {
"source" : "124",
"target" : "s4"
}, {
"source" : "124",
"target" : "s6"
}, {
"source" : "125",
"target" : "s3"
}, {
"source" : "125",
"target" : "s4"
}, {
"source" : "125",
"target" : "s6"
}, {
"source" : "131",
"target" : "s3"
}, {
"source" : "131",
"target" : "s4"
}, {
"source" : "131",
"target" : "s6"
}, {
"source" : "132",
"target" : "s3"
}, {
"source" : "132",
"target" : "s4"
}, {
"source" : "132",
"target" : "s6"
}, {
"source" : "135",
"target" : "s3"
}, {
"source" : "135",
"target" : "s4"
}, {
"source" : "135",
"target" : "s6"
}, {
"source" : "136",
"target" : "s3"
}, {
"source" : "136",
"target" : "s4"
}, {
"source" : "136",
"target" : "s6"
}, {
"source" : "137",
"target" : "s3"
}, {
"source" : "137",
"target" : "s4"
}, {
"source" : "137",
"target" : "s6"
}, {
"source" : "138",
"target" : "s3"
}, {
"source" : "138",
"target" : "s4"
}, {
"source" : "138",
"target" : "s6"
}, {
"source" : "139",
"target" : "s3"
}, {
"source" : "139",
"target" : "s4"
}, {
"source" : "139",
"target" : "s6"
}, {
"source" : "140",
"target" : "s3"
}, {
"source" : "140",
"target" : "s4"
}, {
"source" : "140",
"target" : "s6"
}, {
"source" : "141",
"target" : "s3"
}, {
"source" : "141",
"target" : "s4"
}, {
"source" : "141",
"target" : "s6"
}, {
"source" : "142",
"target" : "s4"
}, {
"source" : "142",
"target" : "s5"
}, {
"source" : "142",
"target" : "s6"
}, {
"source" : "164",
"target" : "s4"
}, {
"source" : "164",
"target" : "s5"
}, {
"source" : "164",
"target" : "s6"
}, {
"source" : "165",
"target" : "s4"
}, {
"source" : "165",
"target" : "s5"
}, {
"source" : "165",
"target" : "s6"
}, {
"source" : "170",
"target" : "s4"
}, {
"source" : "170",
"target" : "s5"
}, {
"source" : "170",
"target" : "s6"
}, {
"source" : "171",
"target" : "s4"
}, {
"source" : "171",
"target" : "s5"
}, {
"source" : "171",
"target" : "s6"
}, {
"source" : "181",
"target" : "s4"
}, {
"source" : "181",
"target" : "s5"
}, {
"source" : "181",
"target" : "s6"
}, {
"source" : "182",
"target" : "s4"
}, {
"source" : "182",
"target" : "s5"
}, {
"source" : "182",
"target" : "s6"
}, {
"source" : "185",
"target" : "s4"
}, {
"source" : "185",
"target" : "s5"
}, {
"source" : "185",
"target" : "s6"
}, {
"source" : "186",
"target" : "s4"
}, {
"source" : "186",
"target" : "s5"
}, {
"source" : "186",
"target" : "s6"
}, {
"source" : "187",
"target" : "s4"
}, {
"source" : "187",
"target" : "s5"
}, {
"source" : "187",
"target" : "s6"
}, {
"source" : "188",
"target" : "s4"
}, {
"source" : "188",
"target" : "s5"
}, {
"source" : "188",
"target" : "s6"
}, {
"source" : "191",
"target" : "s4"
}, {
"source" : "191",
"target" : "s5"
}, {
"source" : "191",
"target" : "s6"
}, {
"source" : "192",
"target" : "s4"
}, {
"source" : "192",
"target" : "s5"
}, {
"source" : "192",
"target" : "s6"
}, {
"source" : "195",
"target" : "s7"
}, {
"source" : "195",
"target" : "s8"
}, {
"source" : "195",
"target" : "s6"
}, {
"source" : "196",
"target" : "s7"
}, {
"source" : "196",
"target" : "s8"
}, {
"source" : "196",
"target" : "s6"
}, {
"source" : "197",
"target" : "s7"
}, {
"source" : "197",
"target" : "s8"
}, {
"source" : "197",
"target" : "s6"
}, {
"source" : "198",
"target" : "s7"
}, {
"source" : "198",
"target" : "s8"
}, {
"source" : "198",
"target" : "s6"
}, {
"source" : "199",
"target" : "s7"
}, {
"source" : "199",
"target" : "s8"
}, {
"source" : "199",
"target" : "s6"
}, {
"source" : "200",
"target" : "s7"
}, {
"source" : "200",
"target" : "s8"
}, {
"source" : "200",
"target" : "s6"
}, {
"source" : "201",
"target" : "s7"
}, {
"source" : "201",
"target" : "s8"
}, {
"source" : "201",
"target" : "s6"
}, {
"source" : "202",
"target" : "s7"
}, {
"source" : "202",
"target" : "s8"
}, {
"source" : "202",
"target" : "s6"
}, {
"source" : "203",
"target" : "s7"
}, {
"source" : "203",
"target" : "s8"
}, {
"source" : "203",
"target" : "s6"
}, {
"source" : "204",
"target" : "s7"
}, {
"source" : "204",
"target" : "s8"
}, {
"source" : "204",
"target" : "s6"
}, {
"source" : "205",
"target" : "s7"
}, {
"source" : "205",
"target" : "s8"
}, {
"source" : "205",
"target" : "s6"
}, {
"source" : "209",
"target" : "s7"
}, {
"source" : "209",
"target" : "s8"
}, {
"source" : "209",
"target" : "s6"
}, {
"source" : "213",
"target" : "s7"
}, {
"source" : "213",
"target" : "s8"
}, {
"source" : "213",
"target" : "s6"
}, {
"source" : "215",
"target" : "s7"
}, {
"source" : "215",
"target" : "s8"
}, {
"source" : "215",
"target" : "s6"
} ];
function init() {
option = {
animationDurationUpdate : 1500,
animationEasingUpdate : 'quinticInOut',
legend : [ {
selectedMode : 'false',
bottom : 20,
data : [ 'switch', 'client' ]
} ],
series : [ {
type : 'graph',
layout : 'force',
//线条样式
edgeSymbol : [ 'circle', 'arrow' ],
edgeSymbolSize : [ 4, 6 ],
edgeLabel : {
normal : {
textStyle : {
fontSize : 20
}
}
},
focusNodeAdjacency : true, //显示关联
roam : true, //缩放
force : {
repulsion : 300
},
//node 属性设置
itemStyle : {
normal : {
label : {
show : true,
position : 'top',
formatter : function(params) {
return params.data.label;
}
},
color : '#2EC7C9',
borderColor : '#5182AB',
borderWidth : 2,
borderType : 'solid'
}
},
//数据
nodes : getdata(data),
links : getlinks(links),
categories : [ {
'name' : 'switch'
}, {
'name' : 'client'
} ]
} ]
};
myChart.setOption(option);
}
//解析data
function getdata(data) {
var datanew = [];
for (var k = 0; k < data.length; k++) {
var obj3 = {
name : '',
symbol : '',
symbolSize : [],
draggable : '',
label : '',
category : '',
ignore:false
}; //switch
obj3.name = data[k].name;
obj3.label = data[k].label;
if (data[k].name.indexOf("s") != -1) {
obj3.draggable = true;
obj3.symbolSize = 32;
obj3.category = 'switch';
} else {
obj3.draggable = false;
obj3.symbolSize =16;
obj3.category = 'client';
}
datanew.push(obj3);
}
;
return datanew;
};
//解析links
function getlinks(data) {
var datanew = [];
for (var k = 0; k < data.length; k++) {
var links = {
flow : 1,//区别线条和node
source : '',
target : '',
lineStyle : {
normal : {
color : '#1E90FF',
width : 2
}
}
};
links.source = data[k].source;
links.target = data[k].target;
datanew.push(links);
}
return datanew;
};
init();
截图如下
