文章目录
今天要发博客，因为今天再不发，2020就过去啦！
最近需要用到Echarts绘制关系图，在实现的过程中遇到了一些小问题，这里记录一下，方便日后查找。
Echarts入门看这里
Echarts基本样式看这里
Echarts进阶版样式看这里
基本应用
- 找一个自己喜欢的Echarts样式
- 按照该样式要求，封装数据
举个栗子：
样式来源
样式图展示：
// 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: "磷虾",
}]
上面的样式分析只针对这个示例样式，若想了解更多有关关系图节点数据的配置项说明信息，请看这里
节点重名问题解决方案
let dataInfo = [{
name: "浮游植物",
category: 0, // 这是种类，一级实体1二级关系2三级关系3四级关系4
symbolSize: 50,
draggable: true,
fixed: true,
value: [0, 150]
}]
官方文档：节点的name不能重复
但是在实际中，会遇到同名节点的情况，比如绘制人物关系图，就很有可能遇到同名的情况；绘制计算结果数据关系图，数据也有可能相同。
解决方法：在数据项中增加一个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",
}]
两点之间如何绘制多条连线
给link数据的lineStyle.curveness设置不同的值即可
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
}
}]
