Appearance
力导向图
静态数据
js
{
"categories": [
"类目0",
"类目1",
"类目2",
"类目3"
],
"series": [
{
"data": [
{
"id": "0",
"name": "Myriel",
"symbolSize": 59.12381,
"x": 80,
"y": 0,
"value": 28.685715,
"category": 0,
"symbol": "http://124.71.147.50:9000/caster/upload/20211115/fa396e414628d388c3154b911b42f1f3.png"
},
{
"id": "1",
"name": "Napoleon",
"symbolSize": 19.6,
"x": 180,
"y": 80,
"value": 4,
"category": 0
},
{
"id": "2",
"name": "MlleBaptistine",
"symbolSize": 66.3,
"x": 100,
"y": -120,
"value": 9.485714,
"category": 1
},
{
"id": "3",
"name": "MmeMagloire",
"symbolSize": 16.32,
"x": 190,
"y": -190,
"value": 9.485714,
"category": 1
},
{
"id": "4",
"name": "CountessDeLo",
"symbolSize": 72.66,
"x": -80,
"y": 50,
"value": 4,
"category": 2
},
{
"id": "5",
"name": "Geborand",
"symbolSize": 82.66,
"x": -50,
"y": -80,
"value": 4,
"category": 3
},
{
"id": "6",
"name": "Champtercier",
"symbolSize": 19.666,
"x": -180,
"y": 50,
"value": 4,
"category": 2
},
{
"id": "7",
"name": "Cravatte",
"symbolSize": 19.66,
"x": -150,
"y": -80,
"value": 4,
"category": 3
},
{
"id": "8",
"name": "Count",
"symbolSize": 19.66,
"x": -180,
"y": 90,
"value": 4,
"category": 2
},
{
"id": "9",
"name": "OldMan",
"symbolSize": 19.66,
"x": 100,
"y": 100,
"value": 4,
"category": 0
}
],
"links": [
{
"id": "0",
"source": "1",
"target": "0"
},
{
"id": "1",
"source": "2",
"target": "0"
},
{
"id": "2",
"source": "3",
"target": "0"
},
{
"id": "3",
"source": "3",
"target": "2"
},
{
"id": "4",
"source": "4",
"target": "0"
},
{
"id": "5",
"source": "5",
"target": "0"
},
{
"id": "6",
"source": "6",
"target": "4"
},
{
"id": "7",
"source": "7",
"target": "5"
},
{
"id": "8",
"source": "8",
"target": "4"
},
{
"id": "9",
"source": "9",
"target": "0"
}
]
}
]
}
{
"categories": [
"类目0",
"类目1",
"类目2",
"类目3"
],
"series": [
{
"data": [
{
"id": "0",
"name": "Myriel",
"symbolSize": 59.12381,
"x": 80,
"y": 0,
"value": 28.685715,
"category": 0,
"symbol": "http://124.71.147.50:9000/caster/upload/20211115/fa396e414628d388c3154b911b42f1f3.png"
},
{
"id": "1",
"name": "Napoleon",
"symbolSize": 19.6,
"x": 180,
"y": 80,
"value": 4,
"category": 0
},
{
"id": "2",
"name": "MlleBaptistine",
"symbolSize": 66.3,
"x": 100,
"y": -120,
"value": 9.485714,
"category": 1
},
{
"id": "3",
"name": "MmeMagloire",
"symbolSize": 16.32,
"x": 190,
"y": -190,
"value": 9.485714,
"category": 1
},
{
"id": "4",
"name": "CountessDeLo",
"symbolSize": 72.66,
"x": -80,
"y": 50,
"value": 4,
"category": 2
},
{
"id": "5",
"name": "Geborand",
"symbolSize": 82.66,
"x": -50,
"y": -80,
"value": 4,
"category": 3
},
{
"id": "6",
"name": "Champtercier",
"symbolSize": 19.666,
"x": -180,
"y": 50,
"value": 4,
"category": 2
},
{
"id": "7",
"name": "Cravatte",
"symbolSize": 19.66,
"x": -150,
"y": -80,
"value": 4,
"category": 3
},
{
"id": "8",
"name": "Count",
"symbolSize": 19.66,
"x": -180,
"y": 90,
"value": 4,
"category": 2
},
{
"id": "9",
"name": "OldMan",
"symbolSize": 19.66,
"x": 100,
"y": 100,
"value": 4,
"category": 0
}
],
"links": [
{
"id": "0",
"source": "1",
"target": "0"
},
{
"id": "1",
"source": "2",
"target": "0"
},
{
"id": "2",
"source": "3",
"target": "0"
},
{
"id": "3",
"source": "3",
"target": "2"
},
{
"id": "4",
"source": "4",
"target": "0"
},
{
"id": "5",
"source": "5",
"target": "0"
},
{
"id": "6",
"source": "6",
"target": "4"
},
{
"id": "7",
"source": "7",
"target": "5"
},
{
"id": "8",
"source": "8",
"target": "4"
},
{
"id": "9",
"source": "9",
"target": "0"
}
]
}
]
}
属性
| 参数 | 说明 | 类型 |
|---|---|---|
| categories | 类目数据 | array |
| series | 图表数据值 | array |
series
| 参数 | 说明 | 类型 |
|---|---|---|
| data | 关系图的节点数据列表 | array |
| link | 节点间的关系数据 | array |
data
| 参数 | 说明 | 类型 |
|---|---|---|
| id | string | |
| name | 数据项名称 | string |
| symbolSize | 节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为 20，高为 10 | number 或 array |
| x | 节点的初始 x 值。在不指定的时候需要指明 layout 属性选择布局方式 | number |
| y | 节点的初始 y 值。在不指定的时候需要指明 layout 属性选择布局方式 | number |
| value | 数据项值 | number 或array |
| category | 数据项所在类目的 index | number |
| symbol | 该类目节点标记的图形 | string |
link
| 参数 | 说明 | 类型 |
|---|---|---|
| id | string | |
| source | 边的源节点名称的字符串，也支持使用数字表示源节点的索引 | string 或 number |
| target | 边的目标节点名称的字符串，也支持使用数字表示源节点的索引 | string 或 number |