markdown 由简入繁，上手跟我做（二十四）echarts 图表 - 桑基图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "基础桑基图示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"series": {
"type": "sankey",
"layout": "none",
"focusNodeAdjacency": "allEdges",
"data": [
{
"name": "a"
},
{
"name": "b"
},
{
"name": "a1"
},
{
"name": "a2"
},
{
"name": "b1"
},
{
"name": "c"
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 5
},
{
"source": "a",
"target": "a2",
"value": 3
},
{
"source": "b",
"target": "b1",
"value": 8
},
{
"source": "a",
"target": "b1",
"value": 3
},
{
"source": "b1",
"target": "a1",
"value": 1
},
{
"source": "b1",
"target": "c",
"value": 2
}
]
}
}
json
{
"title": {
"text": "基础桑基图示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"series": {
"type": "sankey",
"layout": "none",
"focusNodeAdjacency": "allEdges",
"data": [
{
"name": "a"
},
{
"name": "b"
},
{
"name": "a1"
},
{
"name": "a2"
},
{
"name": "b1"
},
{
"name": "c"
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 5
},
{
"source": "a",
"target": "a2",
"value": 3
},
{
"source": "b",
"target": "b1",
"value": 8
},
{
"source": "a",
"target": "b1",
"value": 3
},
{
"source": "b1",
"target": "a1",
"value": 1
},
{
"source": "b1",
"target": "c",
"value": 2
}
]
}
}
示例 2
效果
{
"title": {
"text": "基础桑基图示例2"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"color": [
"#67001f",
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac",
"#053061"
],
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove"
},
"animation": false,
"series": [
{
"type": "sankey",
"bottom": "10%",
"focusNodeAdjacency": "allEdges",
"data": [
{
"name": "a"
},
{
"name": "b"
},
{
"name": "a1"
},
{
"name": "b1"
},
{
"name": "c"
},
{
"name": "e"
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 5
},
{
"source": "e",
"target": "b",
"value": 3
},
{
"source": "a",
"target": "b1",
"value": 3
},
{
"source": "b1",
"target": "a1",
"value": 1
},
{
"source": "b1",
"target": "c",
"value": 2
},
{
"source": "b",
"target": "c",
"value": 1
}
],
"orient": "vertical",
"label": {
"position": "top"
},
"lineStyle": {
"normal": {
"color": "source",
"curveness": 0.5
}
}
}
]
}
json
{
"title": {
"text": "基础桑基图示例2"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"position": "top"
},
"color": [
"#67001f",
"#b2182b",
"#d6604d",
"#f4a582",
"#fddbc7",
"#d1e5f0",
"#92c5de",
"#4393c3",
"#2166ac",
"#053061"
],
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove"
},
"animation": false,
"series": [
{
"type": "sankey",
"bottom": "10%",
"focusNodeAdjacency": "allEdges",
"data": [
{
"name": "a"
},
{
"name": "b"
},
{
"name": "a1"
},
{
"name": "b1"
},
{
"name": "c"
},
{
"name": "e"
}
],
"links": [
{
"source": "a",
"target": "a1",
"value": 5
},
{
"source": "e",
"target": "b",
"value": 3
},
{
"source": "a",
"target": "b1",
"value": 3
},
{
"source": "b1",
"target": "a1",
"value": 1
},
{
"source": "b1",
"target": "c",
"value": 2
},
{
"source": "b",
"target": "c",
"value": 1
}
],
"orient": "vertical",
"label": {
"position": "top"
},
"lineStyle": {
"normal": {
"color": "source",
"curveness": 0.5
}
}
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十三）echarts 图表 - 平行坐标系
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十五）echarts 图表 - 漏斗图