Article Directory
I want to post a blog today, because if I don’t post it today, 2020 will be over!
Recently, I need to use Echarts to draw the relationship diagram. I encountered some small problems in the process of implementation. Record it here for easy search in the future.
For introduction to Echarts, see here
for the basic style of Echarts, see here
for the advanced version of Echarts, see here
Basic application
- Find an Echarts style you like
- According to the style requirements, encapsulate data
Give a chestnut: the
source of the
style The style picture shows:
// dataInfo节点数据，dataLink关系数据，option图配置信息
// 如果完全使用样例样式就不用修改option，只需将自己的数据根据dataInfo/dataLink的格式封装好就行
let dataInfo = []
let dataLink = []
var option = {
}
// 分析dataInfo
// 选取第一项数据来看
// name是节点的属性，显示在节点上的文字，这里的name还是节点的唯一标识，不同节点的name属性不能重复，否则会报错
// category是节点的类型，用以区分节点，比如样例中就是四类节点，分别用四种不同的颜色标识
// symbolSize 是节点的大小
// draggable 控制节点拖拽的交互，默认开启。开启后，可将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 false
// fixed 节点在力引导布局中是否固定
// value 是节点的位置，和坐标一样的存在
let dataInfo = [{
name: "浮游植物",
category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
symbolSize: 50,
draggable: true,
fixed: true,
value: [0, 150]
}]
// 分析dataLink
// 选取第一项数据来看
// source 起点
// value 关系
// target 终点
let dataLink = [{
source: "浮游植物",
value: "被吃",
target: "磷虾",
}]
The above style analysis is only for this sample style. If you want to know more about the configuration item description information of the relationship graph node data, please see here
Solution to the problem of node duplication
let dataInfo = [{
name: "浮游植物",
category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
symbolSize: 50,
draggable: true,
fixed: true,
value: [0, 150]
}]
Official document: 节点的name不能重复
However, in practice, you will encounter nodes with the same name. For example, if you draw a character relationship diagram, you are likely to encounter the same name; if you draw a calculation result data relationship diagram, the data may be the same.
Solution:在数据项中增加一个id项，以id作为节点的唯一标识
let dataInfo = [{
id: 1,
name: "浮游植物",
category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
symbolSize: 50,
draggable: true,
fixed: true,
value: [0, 150]
}]
// 当以Id作为唯一标识时，dataLink也需要修改
// source target需要以Id来标记，并且必须是字符串的形式！！！！！！！
let dataLink = [{
source: "1",
value: "被吃",
target: "2",
}]
How to draw multiple lines between two points
Just set different values for the lineStyle.curveness of the link data
links: [{
source: '节点2',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},{
source: '节点2',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.4
}
}, {
source: '节点2',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.6
}
}]
