血缘桑基echarts sankey配置项内容和展示
配置项如下
var json = {
"antity": [
{
"name": "dataset_1xxxxxxxx",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集2",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集3",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集4",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集5",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集6",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集7",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集8",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集9",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集10",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集11",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集12",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集13",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集14",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集15",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "数据集16",
"depth": 0,
"itemStyle": {
"color": "#79bfe2"
}
},
{
"name": "事实表1",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表2",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表3",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表4",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表5",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表6",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表7",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表8",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表9",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表10",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表11",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表12",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表13",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表14",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表15",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表16",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表17",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表18",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表19",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表20",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表21",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表22",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表23",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表24",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表25",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表26",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表27",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表28",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表29",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表30",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表31",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "事实表32",
"depth": 1,
"itemStyle": {
"color": "#4f98d5"
}
},
{
"name": "属性宽表",
"depth": 2,
"itemStyle": {
"color": "#a9c2e2"
}
},
{
"name": "事件宽表",
"depth": 2,
"itemStyle": {
"color": "#b2c27a"
}
}
],
"relation": [
{
"source": "事实表1",
"target": "属性宽表",
"value": 20
},
{
"source": "事实表2",
"target": "属性宽表",
"value": 20
},
{
"source": "事实表3",
"target": "属性宽表",
"value": 20
},
{
"source": "事实表4",
"target": "属性宽表",
"value": 20
},
{
"source": "事实表5",
"target": "属性宽表",
"value": 20
},
{
"source": "事实表11",
"target": "事件宽表",
"value": 100
},
{
"source": "dataset_1xxxxxxxx",
"target": "事实表1",
"value": 15
},
{
"source": "数据集2",
"target": "事实表1",
"value": 15
},
{
"source": "数据集14",
"target": "事实表4",
"value": 15
},
{
"source": "数据集8",
"target": "事实表10",
"value": 15
},
{
"source": "数据集7",
"target": "事实表10",
"value": 15
},
{
"source": "数据集2",
"target": "事实表2",
"value": 15
},
{
"source": "数据集3",
"target": "事实表3",
"value": 15
},
{
"source": "数据集4",
"target": "事实表4",
"value": 15
},
{
"source": "数据集5",
"target": "事实表5",
"value": 15
},
{
"source": "数据集15",
"target": "事实表15",
"value": 15
},
{
"source": "数据集6",
"target": "事实表6",
"value": 15
},
{
"source": "数据集7",
"target": "事实表7",
"value": 15
},
{
"source": "数据集8",
"target": "事实表8",
"value": 15
},
{
"source": "数据集9",
"target": "事实表9",
"value": 15
},
{
"source": "数据10",
"target": "事实表10",
"value": 15
},
{
"source": "数据集11",
"target": "事实表11",
"value": 15
},
{
"source": "数据集12",
"target": "事实表12",
"value": 15
},
{
"source": "数据集13",
"target": "事实表13",
"value": 15
},
{
"source": "数据集14",
"target": "事实表14",
"value": 15
},
{
"source": "数据集16",
"target": "事实表16",
"value": 15
},
{
"source": "数据集12",
"target": "事实表17",
"value": 15
},
{
"source": "dataset_1xxxxxxxx",
"target": "事实表18",
"value": 15
},
{
"source": "数据集14",
"target": "事实表19",
"value": 15
},
{
"source": "数据集14",
"target": "事实表20",
"value": 15
},
{
"source": "数据集14",
"target": "事实表21",
"value": 15
},
{
"source": "数据集14",
"target": "事实表22",
"value": 15
},
{
"source": "数据集14",
"target": "事实表23",
"value": 15
},
{
"source": "数据集14",
"target": "事实表24",
"value": 15
},
{
"source": "数据集14",
"target": "事实表25",
"value": 15
},
{
"source": "数据集4",
"target": "事实表26",
"value": 15
},
{
"source": "数据集14",
"target": "事实表27",
"value": 15
},
{
"source": "数据集14",
"target": "事实表28",
"value": 15
},
{
"source": "数据集14",
"target": "事实表29",
"value": 15
},
{
"source": "数据集9",
"target": "事实表30",
"value": 15
},
{
"source": "数据集14",
"target": "事实表31",
"value": 15
},
{
"source": "数据集14",
"target": "事实表32",
"value": 15
}
]
};
option = {
title: {
text: '血缘桑基'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter: '{b}'
},
series: [{
layoutIterations: 0,
type: 'sankey',
data: json.antity,
links: json.relation,
focusNodeAdjacency: 'allEdges',
label: {
normal: {
formatter: "{border|{b}}",
rich: {
border: {
color: '#000',
borderColor: '#8ab8ea',
borderWidth: 1,
borderRadius: 3,
padding: 1
}
}
}
},
itemStyle: {
borderWidth: 1,
borderColor: '#aaa'
},
lineStyle: {
color: 'source',
curveness: 0.5
}
}]
}
截图如下
