markdown 由简入繁，上手跟我做（十七）echarts 图表 - 力导向布局图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "Graph 简单示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"animationDurationUpdate": 1500,
"animationEasingUpdate": "quinticInOut",
"series": [
{
"type": "graph",
"layout": "none",
"symbolSize": 50,
"roam": true,
"label": {
"normal": {
"show": true
}
},
"edgeSymbol": [
"circle",
"arrow"
],
"edgeSymbolSize": [
4,
10
],
"edgeLabel": {
"normal": {
"textStyle": {
"fontSize": 20
}
}
},
"data": [
{
"name": "节点1",
"x": 300,
"y": 300
},
{
"name": "节点2",
"x": 800,
"y": 300
},
{
"name": "节点3",
"x": 550,
"y": 100
},
{
"name": "节点4",
"x": 550,
"y": 500
}
],
"links": [
{
"source": 0,
"target": 1,
"symbolSize": [
5,
20
],
"label": {
"normal": {
"show": true
}
},
"lineStyle": {
"normal": {
"width": 5,
"curveness": 0.2
}
}
},
{
"source": "节点2",
"target": "节点1",
"label": {
"normal": {
"show": true
}
},
"lineStyle": {
"normal": {
"curveness": 0.2
}
}
},
{
"source": "节点1",
"target": "节点3"
},
{
"source": "节点2",
"target": "节点3"
},
{
"source": "节点2",
"target": "节点4"
},
{
"source": "节点1",
"target": "节点4"
}
],
"lineStyle": {
"normal": {
"opacity": 0.9,
"width": 2,
"curveness": 0
}
}
}
]
}
json
{
"title": {
"text": "Graph 简单示例"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"animationDurationUpdate": 1500,
"animationEasingUpdate": "quinticInOut",
"series": [
{
"type": "graph",
"layout": "none",
"symbolSize": 50,
"roam": true,
"label": {
"normal": {
"show": true
}
},
"edgeSymbol": [
"circle",
"arrow"
],
"edgeSymbolSize": [
4,
10
],
"edgeLabel": {
"normal": {
"textStyle": {
"fontSize": 20
}
}
},
"data": [
{
"name": "节点1",
"x": 300,
"y": 300
},
{
"name": "节点2",
"x": 800,
"y": 300
},
{
"name": "节点3",
"x": 550,
"y": 100
},
{
"name": "节点4",
"x": 550,
"y": 500
}
],
"links": [
{
"source": 0,
"target": 1,
"symbolSize": [
5,
20
],
"label": {
"normal": {
"show": true
}
},
"lineStyle": {
"normal": {
"width": 5,
"curveness": 0.2
}
}
},
{
"source": "节点2",
"target": "节点1",
"label": {
"normal": {
"show": true
}
},
"lineStyle": {
"normal": {
"curveness": 0.2
}
}
},
{
"source": "节点1",
"target": "节点3"
},
{
"source": "节点2",
"target": "节点3"
},
{
"source": "节点2",
"target": "节点4"
},
{
"source": "节点1",
"target": "节点4"
}
],
"lineStyle": {
"normal": {
"opacity": 0.9,
"width": 2,
"curveness": 0
}
}
}
]
}
示例 2
效果
{
"title": {
"text": "笛卡尔坐标系上的 Graph"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["周一","周二","周三","很长很长的周四","周五","周六","周日"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "graph",
"layout": "none",
"coordinateSystem": "cartesian2d",
"symbolSize": 40,
"label": {
"normal": {
"show": true
}
},
"edgeSymbol": [
"circle",
"arrow"
],
"edgeSymbolSize": [
4,
10
],
"data": [925,651,862,930,3381,5451,5860],
"links": [
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 2
},
{
"source": 2,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 5
},
{
"source": 5,
"target": 6
}
],
"lineStyle": {
"normal": {
"color": "#2f4554"
}
}
}
]
}
json
{
"title": {
"text": "笛卡尔坐标系上的 Graph"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": { },
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["周一","周二","周三","很长很长的周四","周五","周六","周日"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"type": "graph",
"layout": "none",
"coordinateSystem": "cartesian2d",
"symbolSize": 40,
"label": {
"normal": {
"show": true
}
},
"edgeSymbol": [
"circle",
"arrow"
],
"edgeSymbolSize": [
4,
10
],
"data": [925,651,862,930,3381,5451,5860],
"links": [
{
"source": 0,
"target": 1
},
{
"source": 1,
"target": 2
},
{
"source": 2,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 5
},
{
"source": 5,
"target": 6
}
],
"lineStyle": {
"normal": {
"color": "#2f4554"
}
}
}
]
}
上一篇 markdown 由简入繁，上手跟我做（十六）echarts 图表 - 和弦图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（十八）echarts 图表 - 盒须图